javascript - 如何实现防止输入任意标签的标签选择器？

Question

我需要在 HTML 页面中实现标签或类别选择器。

标签需要提供给用户，他们应该不被允许输入任意标签。

jQuery UI 提供 very popular auto-complete implementation , 但它似乎允许选择任意标签。

在下面的屏幕截图中，我被允许选择 “j” 和 “javascript”，无需任何特殊努力。

是否有任何技术、实现或第 3 方工具可以用来不允许用户输入任意标签？

编辑:我的 Web 应用程序使用 PHP、jQuery、jQuery-UI、MySQL 和常用的前端工具运行。

Answer 1

如果使用额外的库对您来说不是问题，Bootstrap 可以通过一些 JQuery 帮助解决您的问题。

我已经为您准备了一个简单的 JSFiddle，您可以在其中看到它的运行情况:

http://jsfiddle.net/sgmonda/Tjbys/8/

我所做的是准备一个文本输入和一个 <ul>列出您选择的标签将出现的位置。 Bootstrap 允许您在写入输入时自动完成，因此您必须关闭默认的自动完成:

<input type="text" id="tags" autocomplete="off" />
<ul id="selected-tags"></ul>

然后您只需添加一些 JQuery 行，让 Bootstrap 自动完成您的输入并将选定的标签添加到您的 <ul>列表:

$('#tags').typeahead({
    source: ['elem1', 'elem2', 'elem3', 'otherElem', 'oneMore'],
    updater: function (item) {
         $('#selected-tags').append('<li>' + item + '</li>');   
    }
});

您可以随时阅读列表以了解用户选择了哪些元素。

var selectedTags = [];
$('#selected-tags').each(function(){
   selectedTags.push($(this).text()); 
});

编辑

如果您想避免重复的标签并添加删除它们的可能性:

http://jsfiddle.net/sgmonda/JMepQ/3/