4

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

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

jQuery UI 提供了一个非常流行的自动完成实现，但它似乎允许选择任意标签。

在下面的屏幕截图中，我被允许选择"j"并且"javascript"没有任何特别的努力。

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

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

在此处输入图像描述

4

1 回答 1

3

如果使用额外的库对您来说不是问题，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/

于 2013-03-22T01:05:01.330 回答