如何使用jQuery创建“标签框”（文本输入字段+标记用逗号分隔）

Question

我正在开发一个允许用户按标签发布内容的网络应用程序但问题是，如果用逗号和文本字段分隔，我将如何在标记周围创建一个很好的块？值仍然是相同的，只有用户的视图会有所不同。

例如YouTube或StackOverflow，现在我不需要它来检查数据库或任何东西。

谢谢！

Answer 1

与Stack Overflow类似的东西：

• 允许使用字母数字和+-.#（并修剪空格！）
• 转换为小写
• 自动创建 focusOut上的标签框 输入 ，（添加更多|分隔的密钥代码）
• 点击（确认）
删除标签框

$(function(){ // DOM ready

  // ::: TAGS BOX

  $("#tags input").on({
    focusout : function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
      if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
      this.value = "";
    },
    keyup : function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if(/(188|13)/.test(ev.which)) $(this).focusout(); 
    }
  });
  $('#tags').on('click', 'span', function() {
    if(confirm("Remove "+ $(this).text() +"?")) $(this).remove(); 
  });

});

#tags{
  float:left;
  border:1px solid #ccc;
  padding:5px;
  font-family:Arial;
}
#tags > span{
  cursor:pointer;
  display:block;
  float:left;
  color:#fff;
  background:#789;
  padding:5px;
  padding-right:25px;
  margin:4px;
}
#tags > span:hover{
  opacity:0.7;
}
#tags > span:after{
 position:absolute;
 content:"×";
 border:1px solid;
 padding:2px 5px;
 margin-left:3px;
 font-size:11px;
}
#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">
  <span>php</span>
  <span>c++</span>
  <span>jquery</span>
  <input type="text" value="" placeholder="Add a tag" />
</div>

Answer 2

你不一定需要在这里重新发明轮子。为此目的已经存在许多库/插件，其中一个是Guillermo Rauch的TextboxList。您可以找到演示here。它已经具有自动完成支持和相当广泛的API，这是任何实现这一过程中的主要障碍。

最初的实现使用了MooTools，但你可以通过golive here找到一个jQuery版本。

Answer 3

在div中放置一个文本输入，然后检查按键（例如逗号或空格键），如果它与键匹配，则使用jQuery将带有标记详细信息的新span添加到div。

如果需要，我可以提供更多细节或示例，但代码应该相当简单。

Answer 4

使用＆＃34;标记支持＆＃34;在select2列表中： https://select2.github.io/examples.html

    $(".js-example-tags").select2({
  tags: true
})

Answer 5

我想制作一个像Facebook一样用来标记人物的标签框，并发现可用的选项要臃肿和/或不做我想要的关键事项：要求标签存在于预设列表中（可以从一个AJAX电话。

我从Roko C. Buljan's answer开始，然后添加了一些重要的东西。

• 箭头键导航
• 如上所述，需要预设答案
• data-属性，便于收集ajax-post。

Codepen for anyone interested