select2 - menyembunyikan kotak pencarian

206

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.

EleventyOne
sumber
Terima kasih atas idenya. Meskipun saya tahu tentang .show () dan .hide () di jQuery, tidak terpikir oleh saya bahwa plug-in akan terus bekerja jika saya melakukan sesuatu seperti itu di luar pilihannya sendiri. Namun demikian, pada pandangan pertama, tampaknya berhasil :)
EleventyOne
Bisakah Anda jelaskan apa yang metode sembunyikan itu lakukan dan bagaimana cara kerjanya? Apakah Anda memberi tahu saya bahwa kotak itu hanya menyembunyikan kotak pencarian karena tampaknya tidak akan terjadi sama sekali
IcedDante
@IcedDante hideMetode ini dijelaskan di sini: api.jquery.com/hide Selama Anda hanya menerapkannya pada pemilih yang sesuai, ya, itu harus menyembunyikan kotak pencarian saja. Namun demikian, ada metode khusus plugin yang dapat digunakan untuk menyembunyikannya, yang saya sarankan Anda gunakan sebagai gantinya (lihat di bawah).
EleventyOne

Jawaban:

474

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
});
Blue Smith
sumber
14
Masalah utama di sini sebagaimana disebutkan dalam tiket di github adalah pada ponsel itu masih menampilkan keyboard. Kami telah mengganti select2 dengan yang dipilih.
toutpt
2
dan itu diterjemahkan dengan sempurna ke angular-ui ui-select2!
rhigdon
Opsi yang sangat berguna! Saya menggunakannya untuk menunjukkan pencarian untuk 10 dan lebih banyak opsi. Tidak perlu untuk menghapus input pencarian secara manual.
blazkovicz
@KevinBrown Infinitybukan nilai negatif. Hasil edit Anda membuat teks dan kode tidak cocok. Masalah yang terkait secara khusus menunjukkan bahwa nilai negatif adalah pendekatan yang didukung dengan benar. Masalah yang ditautkan dengan juga mengklaim "Nilai minimumRestultsForSearch tinggi hanya menyembunyikan kotak pencarian di pilih yang dipilih. Tetapi jika kita mengetikkan beberapa huruf saat pilih ditutup dan fokus - pencarian akan muncul, tidak peduli seberapa tinggi" dan meskipun saya tidak dapat mereproduksi masalah khusus itu dalam versi saat ini, kemungkinan akan menjadi masalah nyata di versi yang lebih lama. Karena alasan itu, saya memutar kembali hasil edit Anda.
1
Tapi, itu sepenuhnya menonaktifkan fungsi pencarian.
sudip
34
.no-search .select2-search {
    display: tidak ada
}

$ ("# test"). select2 ({
    dropdownCssClass: 'tanpa pencarian'
}); 
xicooc
sumber
1
+1 Saya suka ini karena mencegah kotak pencarian muncul sebentar di UI saat permintaan AJAX dibuat. ini juga berlaku untuk hack -1.
SimonGates
Ini jelas merupakan jawaban terbaik untuk pertanyaan itu karena itu benar-benar mencegah acara ui seperti "mencari ....".
Sarin Suriyakoon
5
Bekerja dengan baik, terima kasih! Hanya catatan untuk Googler masa depan, ini membutuhkan versi lengkap select2 (select2.full. *), Seperti yang dinyatakan di sini: github.com/select2/select2/issues/2879#issuecomment-149940634
Othyn
1
Terima kasih, ini yang saya cari karena walaupun kotak pencarian tersembunyi, fitur ini memungkinkan fungsi pencarian tetap tersedia ketika Anda ingin menyebutnya secara terprogram: $ ("# myselect"). Select2 ("search", "search_value")
nicolas
Memang ini pilihan terbaik. Seperti @Othyn mengatakan versi lengkap diperlukan select2.full.min.js seperti yang didokumentasikan di situs web: select2.github.io
robbpriestley
26

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>

Aaron Hudon
sumber
20

Menghapus input dengan jQuery berfungsi untuk saya:

$(".select2-search, .select2-focusser").remove();
Arkaitz Garro
sumber
Sempurna, di ponsel keyboard tidak ditampilkan!
Pieter Meiresone
Ini berfungsi untuk semua dropdown pada halaman, tetapi saya tidak dapat menargetkan dropdown spesifik saja. Tidak dapat ditargetkan karena mereka bukan anak-anak dari id select2.
Shaun Lebron
2
tambahkan pembungkus untuk menentukan
YAMM
3

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

YWA
sumber
Ini mungkin bekerja dengan baik di masa lalu, tetapi tidak berfungsi pada versi terbaru dari select2.
Matt Browne
3

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

$('#select_id').select2({ minimumResultsForSearch: -1 });
Saifur Rahman
sumber
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

MKK
sumber
1

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 });
Mike Campbell
sumber
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);
Juan Manuel De Castro
sumber
1
//readonly on all select2 input
$(".select2-search input").prop("readonly", true);
Juan Manuel De Castro
sumber
1

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

ivanbogomolov
sumber
1

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

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

Foram Thakral
sumber
0

@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

Shahbaz
sumber
0

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

capcom
sumber
0

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

Faisal Ghaffar
sumber
0

coba CSS ini

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

input ini adalah kolom pencarian

Vajiheh habibi
sumber