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

Question

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

标签需要提供给用户，并且不可以输入任意标签。

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

在下面的屏幕截图中，我可以毫不费力地选择"j"和"javascript"。

是否有任何技术，实施或第三方工具可用于不允许用户输入任意标签？

编辑：我的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/