select2 - arama kutusunu gizleme

Daha önemli seçimlerim için, Select2'deki arama kutusu harika. Ancak, bir örnekte, 4 sabit kodlu seçimlerden oluşan basit bir seçimim var. Bu durumda, arama kutusu gereksizdir ve biraz aptalca görünür. Bir şekilde saklamak mümkün mü? Çevrimiçi belgelere bir göz attım ve yapıcıda bunun için herhangi bir seçenek bulamadım.

Tabii ki, sadece normal bir html seçimi kullanabilirsiniz, ancak tutarlılık için mümkünse Select2 kullanmak istiyorum.

Bu konuya bakın https://github.com/ivaynberg/select2/issues/489 , minimumResultsForSearch öğesini negatif bir değere ayarlayarak arama kutusunu gizleyebilirsiniz.

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

Örnekler sayfasında: https://select2.org/searching#hiding-the-search-box

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

.no-search .select2-search {
    görüntü yok
}

$ ( "# Test"). Select2 ({
    dropdownCssClass: 'arama yok'
}); 

Sürüm 4.0.3

Kullanıcı arayüzü gereksinimlerini JavaScript kodunuzla karıştırmamaya çalışın.

İşaretleme içindeki arama kutusunu şu nitelikle gizleyebilirsiniz:

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

Biçimlendirme

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

Misal

$(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 ile girişleri kaldırmak benim için çalışıyor:

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

Bu, temiz ve iyi çalışan en iyi çözümdür:

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

Ardından, bir sınıf oluşturun .hidden { display;none; }

Belirli bir açılır menü için aramayı gizlemek istiyorsanız bunun için id niteliğini kullanın.

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

Eğer seçim sonuçları göster ise, bunu kullanmak zorundasınız:

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

arama sonuçları kutusunu kapatır ve ardından denetimi görünmez yapar

Bunu seçimdeki seçeneklerin sayısına bağlı olarak dinamik olarak yapmak istiyorum; seçimleri 10 veya daha az sonuçla gizlemek için şunu yaparım:

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

Seçiminizde çoklu özellik varsa, bu kirli kesmek çalışır:

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

buradaki dokümanlara bakın https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

İlk açılışta gizlemek istiyorsanız ve açılır menüyü ajax çağrısı ile dolduruyorsanız, select2 bildiriminizdeki ajax bloğuna aşağıdakileri ekleyin:

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

Ajax isteğiniz başarılı olduktan sonra tekrar göstermek (ve odaklanmak) için:

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

Bunu deneyebilirsin

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

arama sonuçları kutusunu kapatır ve ardından denetimi görünmez yapar

Select2 belge select2 belge içinde kontrol edebilirsiniz.

@Misha Kobrin'in yanıtı benim için iyi çalışıyor Bu yüzden daha fazla açıklamaya karar verdim

Arama kutusunu gizlemek istiyorsanız jQuery ile yapabilirsiniz.

örneğin, kimlik kitlesine sahip bir açılır menüde select2 eklentisini başlattınız

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

Örnek select2'nin çalıştığı tüm cihazlarda çalışır.

Oluşturulan girdi alanını select2.min.jsayarlamak için dosyayı düzenledim .select-2__searchreadonly="true"

Çoklu seçim için js kodu yazmanız gerekir, hiçbir ayar özelliği yoktur.

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

Bu, sayfalarında bahsedilen: https://select2.org/searching#multi-select

bu CSS'yi dene

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

bu girdi arama alanıdır