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>