select2 - скрытие окна поиска

Смотрите эту ветку https://github.com/ivaynberg/select2/issues/489, вы можете скрыть поиск box, установив для minimumResultsForSearch отрицательное значение.

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

Это на их странице примеров: https://select2.org/searching#hiding-the-search-box

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

Версия 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();

он закрывает окно результатов поиска, а затем устанавливает невидимый контроль

Мне нравится делать это динамически в зависимости от количества опций в выборе; чтобы скрыть поиск выборок с 10 или менее результатами, я делаю:

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

Если у вас есть несколько атрибутов в вашем выборе, этот грязный прием работает:

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

Если вы хотите скрыть при первоначальном открытии и заполняете раскрывающийся список с помощью вызова ajax, добавьте следующее в блок ajax в своем объявлении select2:

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

Ответ @Misha Kobrin мне подходит, поэтому я решил объяснить это подробнее

Вы хотите скрыть окно поиска, вы можете сделать это с помощью jQuery.

например, вы инициализировали плагин 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;
}

это поле поиска