私はLoopj Tokeninput プラグインを使用していますが、誰かがjQuery の「コンボボックス」機能を実装しているかどうか知りたいですか? または似たようなものですか?スコープは、「下向き矢印」をクリックするか、ドロップダウンメニューのように入力フィールドをクリックするだけで、ローカルソースからのすべてのデータを表示できるようにすることです(ただし、何かを入力するときに絞り込むことができます...)。もしそうなら、誰かがそれを実装する方法を共有できますか?
2 に答える
Chosen
まさにあなたが必要とするものです。
Chosen は、長くて扱いにくい選択ボックスをより使いやすくする JavaScript プラグインです。現在、jQuery と Prototype の両方のフレーバーで利用できます。
tokeninput プラグインでそれを行うための事前定義されたメソッドはありません。ただし、プラグイン自体を変更して、必要なものを実現できます。プラグインにいくつかの変更を加えました。jquery.tokenput.js ファイルで同じ変更を行い、それが機能するかどうかを確認します。jsファイルを開きます。
変数入力ボックス
次に、その .focus(function(){}) 部分に移動し、これに置き換えます。
if (settings.tokenLimit === null || settings.tokenLimit !== token_count) {
if (settings.local_data) {
setTimeout(function() { run_search(''); }, 5);
} else {
show_dropdown_hint();
}
関数 run_search(query)を検索します。関数の一部である場合はelseに移動し、以下のものに置き換えます。
else if (settings.local_data) {
// Do the search through local data
var results ;
if(query==''){
results= settings.local_data;
}
else{
results= $.grep(settings.local_data, function(row) {
return (row[settings.propertyToSearch].toLowerCase().indexOf(query.toLowerCase()) == 0 || row[settings.propertyToSearch].toLowerCase().indexOf(' ' + query.toLowerCase()) > -1);
});
}
ボックスにフォーカスがあり、クエリが空の場合、その入力ボックスの onfocus を使用してリスト全体を返します。クエリが空でない場合、そのクエリが検索されます。
さらに、検索結果ボックスにスクロールバーを表示したい場合は、token-input.css ファイルの「div.token-input-dropdown」の css を次のように変更する必要があります。 - 削除またはコメント: "overflow: hidden" ;" - 追加: "max-height: 150px;" (または、ボックスに設定したい最大の高さ) - 追加: "overflow: auto;"