如何實現防止任意標籤進入的標籤選擇器？

我需要在HTML頁面中實現標籤或類別選擇器。如何實現防止任意標籤進入的標籤選擇器？

標籤需要提供給用戶，他們應該而不是被允許輸入任意標籤。

jQuery UI提供very popular auto-complete implementation，但它似乎允許選擇任意標籤。

在下面的截圖中，我被允許選擇"j"和"javascript"，沒有任何特別的努力。

是否有任何技術，實現或第三方工具可用於不允許用戶輸入任意標籤？

編輯：我的web應用程序使用PHP，jQuery，jQuery-UI，MySQL和通常的前端工具運行。

enter image description here

來源

2013-03-21 Redandwhite

'不應該被允許進入任意tag'究竟是什麼你的意思是'任意標籤'？ – exexzian 2013-03-22 12:50:54

@Bingo我的意思是輸入字段應該提供可能的選項，用戶不應該能夠輸入自己的選項。 – Redandwhite 2013-03-22 12:57:00

@Readandwhite哦，現在明白了，謝謝。你的問題讓我學到很多東西+1這個 – exexzian 2013-03-22 12:59:34

如果使用一個額外的庫是不是對你的問題，引導有一點JQuery的幫助下解決您的問題。

我已經準備了一個簡單的jsfiddle你，在這裏你可以看到在行動吧：

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

我所做的就是準備一個文本輸入和一個<ul>列表，其中所選的代碼會顯示。引導允許寫入輸入時自動完成，所以你必須把默認的自動完成功能關閉：

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

然後你只需要添加一些JQuery的線條，讓引導自動完成您的輸入和選擇的標籤添加到您的<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()); 
});

編輯

如果你想避免重複的標籤，並添加刪除它們的posibility：

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

來源

2013-03-22 01:05:01 sgmonda

Bootstrap（http://twitter.github.com/bootstrap/）是一個由Twitter作者編寫的JavaScript庫（和可選的CSS樣式表），這對於UI開發非常有用（比如JQuery UI）。在我的JSFiddle中，它被使用，就像你在左側的「External Resources」中看到的一樣。 – sgmonda 2013-03-22 01:41:08

我已經修改你的jsfiddle只是非常輕微地禁止重複：http://jsfiddle.net/JMepQ/有沒有任何機會，我也可以啓用刪除標籤？ – Redandwhite 2013-03-22 01:44:42

當然！我編輯了我的答案並添加了它。 – sgmonda 2013-03-22 08:32:28

如何實現防止任意標籤進入的標籤選擇器？

回答

相關問題