标记它的 jquery 插件答案

【问题标题】：Tag-it jquery plugin标记它的 jquery 插件
【发布时间】：2013-11-29 11:23:05
【问题描述】：

我想在我的项目中使用https://github.com/aehlke/tag-it。不幸的是，我找不到任何选项来限制用户只能输入来自预定义 ajax 值的值。

我还想自定义它的建议菜单并为其添加图像。我知道如何自定义 jquery ui 小部件_renderMenu() 函数。标记它呢？

【问题讨论】：

标签： javascript jquery-ui multi-select tag-it

【解决方案1】：

由于 tag-it 本质上是将一个列表变成一个精美的下拉框，因此可以输入框的限制是基于列表中可用的项目：

<script type="text/javascript">
    $(document).ready(function() {
        $("#myTags").tagit();
    });
</script>
<ul id="myTags">
    <!-- Existing list items will be pre-added to the tags -->
    <li>Tag1</li>
    <li>Tag2</li>
</ul>

如果您想从其他地方（数据库、文件等）获取值，您必须确保首先将该数据加载到列表中，然后在完成后调用 tagit()（例如，您可以在 ajax 请求的 complete callback function 中执行此操作）。

当然，这将（据我所知 - 我没有使用 tag-it）只会从 GUI 角度限制选项。您仍然应该检查数据服务器端的完整性。

【讨论】：

您可以在aehlke.github.io/tag-it/examples.html 中测试“在标记中预加载数据”示例。如您所见，这不会阻止用户输入新项目。
我改用 Selectize.js，它比 tagit 好得多。