Javascript 如何使用jQuery制作“标签框”（文本输入字段+用逗号分隔的标签）

How to make a "tags box" using jQuery (with text input field + tags separated by comma)

提问by user115422

I am working on a web application that allows users to post content by tags but the thing is, how would I make a nice block around a tag if its separated by a commaand the text field value would still be the same only the view to the user would differ.

我正在开发一个允许用户通过标签发布内容的 Web 应用程序，但问题是，如果标签由逗号分隔并且文本字段值仍然与视图相同，我将如何在标签周围制作一个漂亮的块用户会有所不同。

An example would be such as YouTube or StackOverflow, for now I don't need it to check a database or anything.

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

Thanks!

谢谢！

回答by Roko C. Buljan

Something similar like Stack Overflow does:

类似于 Stack Overflow 的事情：

• Allows alphanumeric and +-.#(and trims whitespaces!)
• Convert to lowercase
• Create automatically the Tag Box on focusOutEnter,(add more |delimited keyCodes)
• Delete Tag Box on click (with confirmation)

• 允许字母数字和+-.#（并修剪空格！）
• 转换为小写
• 在focusOut上自动创建标签框Enter,（添加更多|分隔的 keyCodes）
• 单击时删除标记框（需确认）

$(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>

回答by Asad Saeeduddin

You don't necessarily need to reinvent the wheel here. A number of libraries/plugins for this purpose already exist, one of which is Guillermo Rauch's TextboxList. You can find a demonstration here. It already has autocomplete support and a pretty extensive API, which is what the major hurdles in any implementation of this are going to be.

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

The original implementation used MooTools, but you can find a jQuery version by golive here.

最初的实现使用 MooTools，但您可以通过 golive在这里找到 jQuery 版本。

回答by hisenberg

Use "Tagging Support" in select2 lists: https://select2.github.io/examples.html

在 select2 列表中使用“标记支持”：https://select2.github.io/examples.html

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

回答by MattG

Put a text input within a div, then check for keypresses (such as the comma or space key), if it matches the key append a new span with the tag details to the div with jQuery.

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

I can provide more detail or an example if needed but it should be fairly straightforward to code.

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

回答by Regular Joe

I wanted to make a tag box like Facebook uses for tagging people, and found the available options to be bloated and/or not do a key thing I wanted: Require the tag exist in a preset list (which can be retrieved from an AJAX call.

我想制作一个像 Facebook 一样用于标记人员的标签框，并且发现可用选项变得臃肿和/或不做我想要的关键事情：要求标签存在于预设列表中（可以从 AJAX 调用中检索） .

I started with Roko C. Buljan's answerand then added a few important things.

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

• Arrow key navigation
• Requiring preset answers, as I said above
• data-attributes for easy gathering for a ajax-post.

• 方向键导航
• 需要预设答案，正如我上面所说的
• data-便于收集 ajax 帖子的属性。

Codepen for anyone interested

任何有兴趣的人都可以使用 Codepen