私のより重要な選択にとって、Select2の検索ボックスは素晴らしいです。しかし、ある例では、私は4つのハードコードされた選択肢から簡単に選ぶことができます。この場合、検索ボックスは不要で、少しばかげているように見えます。どういうわけかそれを隠すことは可能ですか?私はオンラインでドキュメンテーションを調べましたが、コンストラクターでこれに関するオプションを見つけることができませんでした。
もちろん、通常のhtml selectを使用することもできますが、一貫性を保つために、可能であればSelect2を使用したいと思います。
このスレッドを参照してください https://github.com/ivaynberg/select2/issues/489 、あなたはminimumResultsForSearchを負の値に設定することによって検索ボックスを隠すことができます。
$('select').select2({
minimumResultsForSearch: -1
});
例のページにあります。 https://select2.org/searching#hiding-the-search-box
$(".js-example-basic-hide-search").select2({
minimumResultsForSearch: Infinity
});
no-search.select2-search { 表示:なし } $( "#test")。select2({[ dropdownCssClass: '検索しない' });
バージョン4.0.
ユーザーインターフェイスの要件とJavaScriptコードを混同しないようにしてください。
属性を使用してマークアップの検索ボックスを非表示にすることができます。
data-minimum-results-for-search="Infinity"
マークアップ
<select class="select2" data-minimum-results-for-search="Infinity"></select>
例
$(document).ready(function() {
$(".select2").select2();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<label>without search box</label>
<select class="select2" data-width="100%" data-minimum-results-for-search="Infinity">
<option>one</option>
<option>two</option>
</select>
<label>with search box</label>
<select class="select2" data-width="100%">
<option>one</option>
<option>two</option>
</select>
JQueryを使って入力を削除することは私にとってはうまくいきます。
$(".select2-search, .select2-focusser").remove();
特定のドロップダウンの検索を隠したい場合は、そのためにid属性を使用してください。
$('#select_id').select2({ minimumResultsForSearch: -1 });
これが最善の解決策で、清潔でうまく機能します。
$("#select2Id").select2 () ;
$("#select2Id").select2 ('container').find ('.select2-search').addClass ('hidden') ;
次に、クラス.hidden { display;none; }
を作成します。
あなたがあなたの選択にマルチ属性を持っているならば、この汚いハックは働きます:
var multipleSelect = $('select[name="list_type"]');
multipleSelect.select2();
multipleSelect.parent().find('.select2-search--inline').remove();
multipleSelect.on('change', function(){
multipleSelect.parent().find('.select2-search--inline').remove();
});
こちらのドキュメントを参照してください https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets
//Disable a search on particular selector
$(".my_selector").select2({
placeholder: "ÁREAS(todas)",
tags: true,
width:'100%',
containerCssClass: "area_disable_search_input" // I add new class
});
//readonly prop to selector class
$(".area_disable_search_input input").prop("readonly", true);
選択が結果を表示する場合、これを使用する必要があります。
$('#yourSelect2ControlId').select2("close").parent().hide();
検索結果ボックスを閉じて、コントロールを非表示に設定します。
//readonly on all select2 input
$(".select2-search input").prop("readonly", true);
Select内のオプションの数に応じて動的にこれを行います。検索結果が10件以下のselectの検索を隠すには、次のようにします。
$fewResults = $("select>option:nth-child(11)").closest("select");
$fewResults.select2();
$('select').not($fewResults).select2({ minimumResultsForSearch : -1 });
@Misha Kobrinの回答は私にとってうまくいくので、もっと説明することにしました
あなたはあなたがjQueryによってそれをすることができる検索ボックスを隠したいです。
例えば、id観客を持つドロップダウンでselect2プラグインを初期化しました
element_select = '#audience';// id or class
$(element_select).select2("close").parent().hide();
この例は、select2が機能するすべてのデバイスで機能します。
私はselect2.min.js
ファイルを編集して、生成されるselect-2__search
入力フィールドをreadonly="true"
に設定しました。
これを試すことができます
$('#select_id').select2({ minimumResultsForSearch: -1 });
検索結果ボックスを閉じ、コントロールを非表示に設定します
Select2 documentでここで確認できます select2 documents
最初のオープン時に非表示にしたい場合に、ajax呼び出しを介してドロップダウンを取り込む場合は、select2宣言のajaxブロックに以下を追加してください。
beforeSend: function ()
{
$('.select2-search--dropdown').addClass('hidden');
}