如何制作标签文本框

在stackoverflow中，当我们发帖时，我们可以看到一个文本框’Tags’。

在键入单词和空格时，它将成为标记。 在成为标签后，我们从一个单词中删除一个字母。但是我们可以通过单击X图像来删除单词本身。

我想为标签创建一个类似的文本框。 在stackoverflow中有自动建议也与此文本框相关联，但我不需要它。

任何帮助/链接将不胜感激

Answer 1

这些在线有很多这样的东西。 我发现有些人很容易使用Google。 看看这个例子：

http://xoxco.com/projects/code/tagsinput/

Answer 2

编辑：这是一个类似的例子，略有不同（更好）的function：
https://stackoverflow.com/a/14083331/383904

---

一个很好的小型演示，您可以轻松升级和修改：

$('#tags input').on('focusout',function(){ var txt = $.trim( this.value ); if(txt) { $(this).before(''+txt+''); } this.value = ""; }); $('#tags').on('click','.tag',function(){ if( confirm("Really delete this tag?") ) $(this).remove(); }); 

 #tags{ float:left; border:1px solid #ccc; padding:5px; font-family:Arial; } #tags span.tag{ display:block; float:left; color:#fff; background:#689; padding:5px; padding-right:25px; margin:4px; } #tags span.tag:after{ position:absolute; content:"x"; border:1px solid; padding:0 4px; margin:3px 0 10px 5px; cursor:pointer; font-size:10px; } #tags input{ background:#eee; border:0; margin:4px; padding:7px; width:auto; }