如何制作一个文本框，可以像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>

- qwww

---

你的 JavaScript 代码在哪里？ - MrSmile

Answer 1

你可以使用像这样的插件： https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

- Ferus7

---

如何限制输入仅来自值列表？ - qwww

您可以在文档中查看，源参数是关键：$('input').tagsinput({ itemValue: 'value', itemText: 'text', source: function(query) { return [{ "value": 1 , "text": "阿姆斯特丹" }, { "value": 2 , "text": "马德里" }]; } }); - Ferus7

Answer 2

你可以使用这个 JQuery 插件

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

- mshouman

---

如何限制输入仅来自值列表？ - qwww

$("#myTags").tagit({ availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"] }); - mshouman

@qwww 请查看此轻量级文档 https://github.com/aehlke/tag-it/blob/master/README.markdown - mshouman

@qwww 我为你添加了一个示例，请尝试并给我反馈。 - mshouman

我尝试了一下，但它没有起作用，可能是由于与我的CSS发生了冲突。 - qwww

Answer 3

这可能会特别有助于关于Stack Overflow的标签选择 -> Stack Tags以及使用像bootstrap这样的框架可以让您更轻松地完成，就像已经提到的那样。

- Sir Catzilla

---

如何限制输入仅来自值列表？ - qwww

好的，你可以设置一个禁用输入框和一个下拉菜单，其中下拉菜单中包含视图列表。当从下拉菜单中选择一个视图时，它将从下拉菜单中移除并添加为输入字段中的标签。当标签从输入字段中删除后，它将再次添加到下拉菜单中。你使用任何框架吗？ - Sir Catzilla

我正在使用 Flask 框架工作。 - qwww