Для моих более значимых выборов окно поиска в Select2 замечательно. Однако в одном случае у меня есть простой выбор из 4 жестко кодированных вариантов. В этом случае окно поиска является излишним и выглядит немного глупо. Можно ли как-то скрыть это? Я просмотрел документацию в Интернете и не смог найти никаких вариантов для этого в конструкторе.
Я мог бы, конечно, просто использовать регулярный выбор html, но для согласованности я бы хотел использовать Select2, если это возможно.
Смотрите эту тему https://github.com/ivaynberg/select2/issues/489, вы можете скрыть окно поиска, установив для параметра minimumResultsForSearch отрицательное значение.
$('select').select2({
minimumResultsForSearch: -1
});
Это на их странице примеров: https://select2.org/searching#hiding-the-search-box
$(".js-example-basic-hide-search").select2({
minimumResultsForSearch: Infinity
});
.no-search .select2-search {
display:none
}
$("#test").select2({
dropdownCssClass : 'no-search'
});
Версия 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();
он закрывает окно результатов поиска, а затем устанавливает контроль невидимым
Мне нравится делать это динамически в зависимости от количества опций в select; чтобы скрыть поиск для выбора с 10 или менее результатами, я делаю:
$fewResults = $("select>option:nth-child(11)").closest("select");
$fewResults.select2();
$('select').not($fewResults).select2({ minimumResultsForSearch : -1 });
//readonly on all select2 input
$(".select2-search input").prop("readonly", true);
//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);
Если вы хотите скрыть при первоначальном открытии и заполняете раскрывающийся список с помощью вызова 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();
}
Если у вас есть несколько атрибутов в вашем выборе, этот грязный хак работает:
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
@Миша Кобрин ответит хорошо для меня, поэтому я решил объяснить это подробнее
Вы хотите скрыть окно поиска, которое вы можете сделать с помощью jQuery.
например, вы инициализировали плагин select2 в раскрывающемся списке с аудиторией id
element_select = '#audience';// id or class
$(element_select).select2("close").parent().hide();
Пример работает на всех устройствах, на которых работает select2.
Я отредактировал файл select2.min.js, чтобы установить поле ввода select-2__search, сгенерированное в readonly="true".
Вы можете попробовать это
$('#select_id').select2({ minimumResultsForSearch: -1 });
он закрывает окно результатов поиска и затем устанавливает контроль невидимым
Вы можете проверить здесь в документе select2 документы select2
Для множественного выбора вы должны написать 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
Вы можете поместить поле .select2 в div, а затем скрыть div, а не фактический поле .select2
$('#parentDiv').hide();<div id="parentDiv">
<select id="myHiddenField"></select>
</div>