javascript - 如何制作标签文本框

Question

在stackoverflow中，当我们发帖时，我们可以看到一个文本框“标签”。

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

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

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

Answer 1

网上有一大堆这样的东西。我发现有些人很容易使用谷歌。例如，看看这个：

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

Answer 2

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

---

一个不错的小演示，您可以轻松升级和修改：

$('#tags input').on('focusout',function(){    
  var txt = $.trim( this.value );
  if(txt) {
    $(this).before('<span class="tag">'+txt+'</span>');
  }
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tags">
  <input type="text" value="" placeholder="Add a tag" />
</div>