select2-検索ボックスを隠す

私のより重要な選択については、Select2の検索ボックスはすばらしいです。ただし、1つの例では、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.3

ユーザーインターフェイスの要件と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();

これが最善の解決策であり、クリーンで機能します。

$("#select2Id").select2 () ;
$("#select2Id").select2 ('container').find ('.select2-search').addClass ('hidden') ;

次に、クラスを作成します .hidden { display;none; }

特定のドロップダウンの検索を非表示にする場合は、id属性を使用します。

$('#select_id').select2({ minimumResultsForSearch: -1 });

選択が結果を表示する場合、これを使用する必要があります。

$('#yourSelect2ControlId').select2("close").parent().hide();

検索結果ボックスを閉じて、コントロールを非表示に設定します

これは、selectのオプションの数に応じて動的に行うのが好きです。結果が10以下のselectの検索を非表示にするには、次のようにします。

$fewResults = $("select>option:nth-child(11)").closest("select");
$fewResults.select2();
$('select').not($fewResults).select2({ minimumResultsForSearch : -1 });

//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);

//readonly on all select2 input
$(".select2-search input").prop("readonly", true);

あなたの選択に複数の属性がある場合、この汚いハックは機能します：

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#limited-display-of-the-search-box-to-large-result-sets

最初の開始時に非表示にする必要があり、ajax呼び出しを介してドロップダウンにデータを入力する場合は、select2宣言のajaxブロックに以下を追加します。

beforeSend: function () 
  {
    $('.select2-search--dropdown').addClass('hidden');
  }

ajaxリクエストが成功した後で再度表示（およびフォーカス）するには：

  success: function() {
      $('.select2-search--dropdown').removeClass('select2-search--hide'); // show search bar then focus
      $('.select2-search__field')[0].focus();
  }

あなたはこれを試すことができます

$('#select_id').select2({ minimumResultsForSearch: -1 });

検索結果ボックスを閉じて、コントロールを非表示に設定します

select2ドキュメントselect2ドキュメントでここをチェックできます

@ミシャコブリンの答えは私にとってうまくいくので、私はそれをもっと説明することにしました

jQueryで実行できる検索ボックスを非表示にしたい。

たとえば、IDのオーディエンスを持つドロップダウンでselect2プラグインを初期化しました

element_select = '#audience';// id or class
$(element_select).select2("close").parent().hide();

この例は、select2が機能するすべてのデバイスで機能します。

select2.min.jsファイルを編集して、select-2__search生成される入力フィールドをに設定しましたreadonly="true"。

複数選択の場合、jsコードを記述する必要があります。設定プロパティはありません。

$('#js-example-basic-hide-search-multi').select2();

$('#js-example-basic-hide-search-multi').on('select2:opening select2:closing', function( event ) {
    var $searchfield = $(this).parent().find('.select2-search__field');
    $searchfield.prop('disabled', true);
});

これは彼らのページで言及されました：https：//select2.org/searching#multi-select

このCSSを試してください

input[aria-controls=select2-product-type-results]{
  display: none;
}

この入力は検索フィールドです