select2 - menyembunyikan kotak pencarian

Untuk pilihan saya yang lebih signifikan, kotak pencarian di Select2 luar biasa. Namun, dalam satu contoh, saya memiliki pilihan sederhana 4 pilihan hard-coded. Dalam hal ini, kotak pencarian berlebihan dan terlihat konyol. Apakah mungkin menyembunyikannya? Saya melihat-lihat dokumentasi online dan tidak dapat menemukan opsi untuk ini di konstruktor.

Saya bisa, tentu saja, hanya menggunakan pilih html biasa, tetapi untuk konsistensi saya ingin menggunakan Select2 jika memungkinkan.

Lihat utas ini https://github.com/ivaynberg/select2/issues/489 , Anda dapat menyembunyikan kotak pencarian dengan menetapkan minimumResultForSearch ke nilai negatif.

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

Itu ada di halaman Contoh mereka: https://select2.org/searching#hiding-the-search-box

$(".js-example-basic-hide-search").select2({
  minimumResultsForSearch: Infinity
});

.no-search .select2-search {
    display: tidak ada
}

$ ("# test"). select2 ({
    dropdownCssClass: 'tanpa pencarian'
}); 

Versi 4.0.3

Cobalah untuk tidak mencampur persyaratan antarmuka pengguna dengan kode JavaScript Anda.

Anda dapat menyembunyikan kotak pencarian di markup dengan atribut:

data-minimum-results-for-search="Infinity"

Markup

<select class="select2" data-minimum-results-for-search="Infinity"></select>

Contoh

$(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>

Menghapus input dengan jQuery berfungsi untuk saya:

$(".select2-search, .select2-focusser").remove();

Ini adalah solusi terbaik, bersih dan berfungsi dengan baik:

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

Lalu, buat kelas .hidden { display;none; }

Jika Anda ingin menyembunyikan pencarian untuk drop down tertentu gunakan atribut id untuk itu.

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

Jika pilih ini menunjukkan hasil, Anda harus menggunakan ini:

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

itu menutup kotak hasil pencarian dan kemudian mengatur kontrol tidak terlihat

Saya suka melakukan ini secara dinamis tergantung pada jumlah opsi dalam pilih; untuk menyembunyikan pencarian dengan hasil 10 atau lebih sedikit, saya lakukan:

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

Jika Anda memiliki multi atribut pada pilihan Anda, hack kotor ini berfungsi:

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();
});

lihat dokumen di sini https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

Jika Anda ingin menyembunyikan pada pembukaan awal dan Anda mengisi dropdown melalui panggilan ajax, tambahkan berikut ini ke blok ajax di deklarasi select2 Anda:

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

Untuk kemudian menampilkannya lagi (dan fokus) setelah permintaan ajax Anda berhasil:

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

Anda bisa mencoba ini

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

itu menutup kotak hasil pencarian dan kemudian mengatur kontrol tidak terlihat

Anda dapat memeriksa di sini di dokumen select2 dokumen select2

@Misha Kobrin bekerja dengan baik untuk saya. Jadi saya memutuskan untuk menjelaskannya lebih lanjut

Anda ingin menyembunyikan kotak pencarian yang bisa Anda lakukan dengan jQuery.

misalnya Anda telah menginisialisasi plugin select2 pada drop down memiliki id audiens

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

Contoh ini bekerja pada semua perangkat yang berfungsi select2

Saya mengedit select2.min.jsfile untuk mengatur select-2__searchbidang input yang dihasilkan readonly="true".

Untuk pilihan ganda Anda harus menulis kode js, tidak ada properti pengaturan.

$('#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);
});

Ini disebutkan di halaman mereka: https://select2.org/searching#multi-select

coba CSS ini

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

input ini adalah kolom pencarian