4

HTMLページにタグまたはカテゴリセレクタを実装する必要があります。

タグはユーザーに提供する必要があり、任意のタグを入力できないようにする必要があります。

jQuery UIは非常に人気のあるオートコンプリート実装を提供しますが、任意のタグを選択できるようです。

下のスクリーンショットでは、特別な努力なし"j"に選択することが許可されています。"javascript"

ユーザーが任意のタグを入力できないようにするために使用できる手法、実装、またはサードパーティのツールはありますか？

編集：私のWebアプリケーションは、PHP、jQuery、jQuery-UI、MySQL、および通常のフロントエンドツールを使用して実行されます。

ここに画像の説明を入力してください

4

1 に答える 1

3

追加のライブラリを使用しても問題がない場合は、BootstrapがJQueryのヘルプを少し使用して問題を解決します。

簡単なJSFiddleを用意しました。ここで、実際の動作を確認できます。

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

私が行ったことは、テキスト入力と、<ul>選択したタグが表示されるリストを準備することです。ブートストラップを使用すると、入力に書き込むときにオートコンプリートが可能になるため、デフォルトのオートコンプリートをオフにする必要があります。

<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 に答える