4

Como fazer um input do tipo text para usar em um formulário que preciso adicionar tags, igualmente como existe no Stack Overflow?

print tags

Observação

A quem for responder, a resposta pode ficar extremamente grande se for citar o processamento do lado servidor, apesar de ser bem-vinda, eu estou mais interessado no HTML e JavaScript para fazer esse layout.

2
  • Você precisa do sistema de busca, nem que seja apenas com javascript, ou deseja apenas a funcionalidade de adicionar as tags a esquerda do texto? Commented 11/01/2016 às 1:35
  • Queira apenas a parte visual, a parte lógica de busca seria complexa demais pra perguntar aqui sem ao menos ter uma base pronta, portanto apenas a parte visual de adicionar as tags à esquerda e realçadas já estaria de bom tamanho.
    – user35937
    Commented 11/01/2016 às 1:38

2 Respostas 2

4

O elemento que parece um <input> é na verdade uma <div>, o <input> esta dentro dela e as tags que aparecem são divs inseridas com document.createElement. O autocomplete (quando digita) é realmente questão do uso de ajax e interação com o servidor.

Todavia o problema me parece apenas com o front-end mesmo, sendo assim existem plugins prontos que podem lhe auxiliar.

jQuery

Para jQuery existem vários plugins, mas irei citar o https://github.com/xoxco/jQuery-Tags-Input:

Adicione isto a página:

<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

Crie um elemento assim:

<input name="tags" id="tags" value="foo,bar,baz" />

Coloque no $.ready ou $(...) isto:

$(function() {
    $('#tags').tagsInput();
})

Ele suporta interação com o servidor assim:

$('#tags').tagsInput({
  autocomplete_url:'http://myserver.com/api/autocomplete'
});

Exemplo básico:

$(function() {
    $('#tag1').tagsInput({});
});
<link href="http://xoxco.com/examples/jquery.tagsinput.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://xoxco.com/examples/jquery.tagsinput.js"></script>

<div id="wrapper">
<p>Exemplo básico: 
    <input id="tag1" value="stack,overflow,portugues,olá,mundo" />
</p>
</div>

Angular.js

Para angular existe o http://mbenford.github.io/ngTagsInput/:

Adicione após o angular.js:

<script type="text/javascript" src="path/to/angular.min.js"></script>
<script type="text/javascript" src="path/to/ng-tags-input.min.js"></script>

No header adicione:

<link rel="stylesheet" href="path/to/ng-tags-input.min.css">    

Adicione a aplicação:

angular.module('myApp', ['ngTagsInput']);

Para usar:

<tags-input ng-model="tags"></tags-input>
2
  • Muito esclarecedor, me interessei pelo primeiro, vou fazer uns testes com ele, muito obrigado. Não vou marcar como melhor resposta ainda para que os outros possam responder com outras alternativas, talvez seja útil para o conteúdo do site.
    – user35937
    Commented 11/01/2016 às 2:03
  • @RenanCavalieri a questão não é se vai ou não aparecer alternativas melhores, é se você testou e se funcionou pra você. Se aparecer algo melhor então você pode desmarcar a minha e marcar a nova resposta ;) - Mas o importante mesmo é testar e usar primeiro, depois você marca a resposta.
    – Syzoth
    Commented 11/01/2016 às 2:11
3

Como complemento da ótima resposta do Guilherme Nascimento, deixo aqui uma opção "feita na mão" deste sistema de tag. Você pode conferir abaixo:

function tagCreator(par) {
  par.append('<div class="tagInsert"></div>');
  var newTags = par.children('input:text');
  newTags.addClass('newTag');
  newTags.appendTo('.tagInsert');
  $('.tagInsert').add(newTags);

  var tags = newTags.val().split(',');

  function renderTags() {
tags.forEach(function(el, i) {
  if (i != tags.length) {
    newTags.before('<div class="tag"><span class="tagName">' + el + '</span><span class="tagClose">x</span></div>');
  }
})
$('.newTag').val('');
  }
  renderTags()
  var i = 0;
  newTags.bind("keydown", function(e) {

var keyCode = (e.keyCode ? e.keyCode : e.which)

$(this).css('max-width', $(this).closest('div').parent('div').width());
$(this).css('width', (this.value.length + 1) * 6);

$('.tag:last').css('opacity', '1');

if (keyCode == 13 || keyCode == 188) {
  $(this).val(this.value.replace(/[,]/g, ''))
  e.preventDefault();
  if (/\w/g.test(this.value)) {
    $('.tag').remove();
    tags.push(this.value.replace(',', ''))
    renderTags();
  }
}

if (keyCode == 8 && this.value == "") {
  i++;
  if (i == 1) {
    $('.tag:last').css('opacity', '0.6');
  } else if (i == 2) {
    $('.tag:last').remove();
    tags.pop();
    i = 0;
  }
} else {
  i = 0;
}
  })

  $(document).on('click', '.tagClose', function(e) {
tags.splice($(this).index('.tagClose'), 1);
$(this).closest('div.tag').remove();
  })

  par.on('click', function(e) {
newTags.focus();
  })
}
tagCreator($('.tags'));
/* Div que a caixa de texto está inserida */
.tagInsert {
  width: auto;
  display: block;
}

/*Caixa de texto*/
.newTag {
  height: 28px;
  min-width: 80px;
  border: none;
  outline: none;
}

/* Box de cada tag */
.tag {
  display: inline-block;
  line-height: 20px;
  height: auto;
  background: #13d277;
  border: 2px solid #0e9856;
  padding: 3px 5px;
  margin: 1px 3px;
  border-radius: 5px;
  color: #fff;
  max-width: 100%;
  word-break: break-all;  
}

/* Botão de fechar */
.tagClose {
  display: inline-block;
  margin-left: 7px;
  background: #0e9856;
  color: #fff;
  width: 10px;
  height: 10px;
  padding: 2px;
  border-radius: 100%;
  line-height: 110%;
  font-size: 7pt;
  text-align: center;
  cursor: pointer;
  font-family: 'Trebuchet MS', sans-serif;
}

/* Alinhando a caixa de texto e as tags */
.tags div {
  display: inline-block;
}

/* Div geral */
.tags {
  border: 2px solid #666;
  border-radius: 5px;
  background: #fff;
  height: auto;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tags">
  <input type="text" value="html, css, javascript, php">
</div>

JsFiddle

Não acho necessário explicar todas as funções que usei, até porque seria muito extenso, mas basta aplicar com o padrão do exemplo que irá, funcionar. Caso veja algum bug, pode me avisar.

A função tagCreator(), que recebe como argumento uma div que necessariamente deve ter dentro um input:text. Os valores padrões são inseridos no value da input, separados por , vírgula.

Você pode manipular o css a seu gosto, ele está comentado.

Você deve fazer log-in para responder a esta pergunta.