如何制作一个可以接受诸如stackoverflow标签选择之类的标签的文本框？

Question

我喜欢制作一个可搜索的文本框，可以选择或删除多个标签，最后将其提交到数据库。 在stackoverflow中是这样的：

我尝试使用这个：

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Answer 1

您可以使用这样的插件：

https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

Answer 2

您可以使用this JQuery plugin

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link href="css/jquery.tagit.css" rel="stylesheet" type="text/css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tag-it.js" type="text/javascript" charset="utf-8"></script>

<ul id="myTags">
    <!-- Existing list items will be pre-added to the tags -->
    <li>Tag1</li>
    <li>Tag2</li>
</ul>

<script type="text/javascript">
    $(document).ready(function() {
        $("#myTags").tagit();
    });

    $("#myTags").tagit({
        availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"],
    readOnly: true,    
    });
</script>

Answer 3

这可能特别有助于堆栈溢出的标签选择-> Stack Tags以及使用bootstrap之类的框架都可以使您更轻松地完成上述工作。