select2 - ukrywanie pola wyszukiwania

W przypadku moich bardziej znaczących zaznaczeń pole wyszukiwania w Select2 jest wspaniałe. Jednak w jednym przypadku mam prosty wybór 4 zakodowanych na stałe opcji. W tym przypadku pole wyszukiwania jest zbędne i wygląda trochę głupio. Czy można to jakoś ukryć? Przejrzałem dokumentację online i nie znalazłem żadnych opcji w konstruktorze.

Mógłbym oczywiście użyć zwykłego wyboru HTML, ale dla zachowania spójności chciałbym użyć Select2, jeśli to możliwe.

Zobacz ten wątek https://github.com/ivaynberg/select2/issues/489 , możesz ukryć pole wyszukiwania, ustawiając wartość minimumResultsForSearch na wartość ujemną.

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

Jest na ich stronie z przykładami: https://select2.org/searching#hiding-the-search-box

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

.no-search .select2-search {
    Nie wyświetla się
}

$ („# test”). select2 ({
    dropdownCssClass: „brak wyszukiwania”
}); 

Wersja 4.0.3

Staraj się nie mieszać wymagań interfejsu użytkownika z kodem JavaScript.

Możesz ukryć pole wyszukiwania w znacznikach za pomocą atrybutu:

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

Narzut

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

Przykład

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

Usuwanie danych wejściowych za pomocą jQuery działa dla mnie:

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

To najlepsze rozwiązanie, czyste i działa dobrze:

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

Następnie utwórz klasę .hidden { display;none; }

Jeśli chcesz ukryć wyszukiwanie konkretnego menu rozwijanego, użyj do tego atrybutu id.

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

Jeśli wybierz opcję Pokaż wyniki, musisz użyć tego:

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

zamyka pole wyników wyszukiwania, a następnie ustawia kontrolę niewidoczną

Lubię to robić dynamicznie w zależności od liczby opcji w zaznaczeniu; aby ukryć wyszukiwanie zaznaczeń z 10 lub mniej wynikami, wykonuję:

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

Jeśli masz do wyboru wiele atrybutów, ten brudny hack działa:

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

zobacz dokumenty tutaj https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

Jeśli chcesz ukryć przy pierwszym otwarciu i wypełniasz menu rozwijane za pomocą wywołania ajax, dodaj następujące elementy do bloku ajax w deklaracji select2:

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

Aby następnie wyświetlić go ponownie (i skoncentrować się) po pomyślnym wysłaniu żądania ajax:

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

Możesz tego spróbować

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

zamyka pole wyników wyszukiwania, a następnie ustawia kontrolę niewidoczną

Możesz to sprawdzić tutaj w dokumentach select2 select2

Odpowiedź Mishy Kobrin działa dobrze dla mnie. Postanowiłem więc wyjaśnić więcej

Chcesz ukryć pole wyszukiwania, możesz to zrobić przez jQuery.

na przykład zainicjowałeś wtyczkę select2 w menu rozwijanym posiadającym id odbiorców

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

Przykład działa na wszystkich urządzeniach, na których działa select2.

Zedytowałem select2.min.jsplik, aby ustawić select-2__searchpole wejściowe, które jest generowane readonly="true".

W przypadku wielokrotnego wyboru musisz napisać kod js, nie ma właściwości ustawienia.

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

Wspomniało to na ich stronie: https://select2.org/searching#multi-select

spróbuj tego CSS

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

to dane wejściowe to pole wyszukiwania