web-dev-qa-db-ja.com

検索フィールドなしのjQuery Chosenプラグイン

これがどこかでカバーされているかどうかはわかりませんが、ドキュメントでそれを見つけることができず、jQueryが選択したプラグイン（スタイル選択入力に使用）に検索入力ボックスを含めることができないかどうか疑問に思っていました。具体的には、標準の選択なしで使用したいと思います。

http://harvesthq.github.com/chosen/

javascriptjqueryjquery-pluginsjquery-chosen
30
bob_cobb

さて、私もドキュメントを試してみましたが、運がなかったので、最終的にこれに修正しました

$（ '。chzn-search'）。hide（）;

私が選ばれた後、私は上記を行います。お役に立てれば

11
Dhiraj

簡単なフォローアップ：機能に気づいた

AbstractChosen.prototype.set_default_values

変数の読み取り元

this.options.disable_search

したがって、次のようにして検索フィールドを無効にすることができます

jQuery('select').chosen( {disable_search: true} );

固定数のしきい値を使用しません。

62
gunnarsson
$(".chzn-select").chosen({disable_search_threshold: 3});

Selectの要素の数がdisable_search_threshold（ここでは2以下）より小さい場合、検索ボックスは表示されません。

43
Maxime Lafontaine

スタイルシートにクラスを追加します。

.chzn-select { display: none }

または、個々の要素に対して、要素を指定し、_chznを追加してターゲットにします。

#element_chzn .chzn-select { display: none; }

注：を選択すると、要素IDとクラスのハイフンがアンダースコアに変換されるため、必要なelement-idをターゲットにできます。

#element_id_chzn .chzn-select { display: none; }
5
Jef Furlong

選択したjqueryの新しいバージョンでは、ドロップダウンで検索入力を無効にするオプションが提供されます。

$(".chzn-select").chosen({
   disable_search: true
});

古いバージョンはこのオプションをサポートしていません。使用できるよりも新しいバージョンを使用することを厳密に許可されていない場合

$(".chzn-select").chosen({
   disable_search_threshold: 5
});

結果が5未満の場合は検索ボックスを非表示にし、性別タイプのプルダウンで使用するのが最適です。これを修正する別の方法があります。

$(".chzn-select").chosen();
$(".chzn-select").hide();

初期化後すぐにhideを呼び出してください。このトリックが機能する理由がわかりませんが、それはあなたが望むことをしています！

最新のオプションにアクセスできるように、最新バージョンを使用することをお勧めします。

それがあなたのために働くことを願っています！

3
Adnan

このコードを使用して無効にします。

jQuery('select').chosen( {disable_search: true} );

それを隠すことを忘れないでください、そうでなければ、それはまだモバイルで動作します！

.chzn-search{display: none}
2
GwenM
$('select').chosen( {disable_search: true} );
2
sami

disable_search_thresholdオプションは、単一選択ドロップダウンの検索ボックスを非表示にします。渡される数は、検索ボックスを表示する前に許可するアイテムの数を指定します。検索ボックスが必要ない場合は、検索ボックスに含まれるアイテムの数よりも大きい数に設定するだけです。

$('#myDropDown').chosen({ disable_search_threshold: 10 });
2
fotijr

複数の選択のために検索フィールドを非表示にする選択された設定はどれも機能していないように思えたので、577行目のchoose.jquery.jsを次のようにハッキングしました。

<li class="search-field"><span class="placeholder">' + this.default_text + '</span></li>

（入力フィールドの代わりにスパン）。この行もコメントアウトする必要がありました

this.search_field[0].disabled = false;

コードをハックするのはベストプラクティスではありませんが、私にとってはうまくいきます。

1
Arerrac

JQuery（ 'select'）。chosen（{disable_search：true}）;を使用しましたしかし、chromeプロファイラーでは、メソッドsearch_field_scaleが呼び出され、多くのパフォーマンスを消費します。

したがって、メソッドと彼へのすべての呼び出しを削除し、show_search_field_defaultでthis.search_field.css（{'width'： '100％'}）に置き換え、style = 25pxをstyle：100％に置き換え、this.search_field.cssよりも（{'width'： '23px'}）; 「data-placeholder」のためのresult_select

私のためにうまく働いています。

0
pedrolopes10
disable_search:true,

選択したjqueryプラグインのドキュメントです

0
Fury

私のために働く唯一の選択されたの最新バージョンで：

$('ul.chosen-choices li.search-field').hide();
0
Darin Kolev