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


206

Для моих более значительных отборов окно поиска в Select2 замечательно. Однако, в одном случае, у меня есть простой выбор из 4 жестко закодированных вариантов. В этом случае окно поиска является излишним и выглядит немного глупо. Можно ли это как-то скрыть? Я просмотрел документацию онлайн и не смог найти никаких вариантов для этого в конструкторе.

Я мог бы, конечно, просто использовать обычный выбор HTML, но для согласованности я хотел бы использовать Select2, если это возможно.


Спасибо за идею. Хотя я знал о .show () и .hide () в jQuery, мне не пришло в голову, что плагин продолжит работать, если я сделаю что-то подобное вне его собственных опций. Тем не менее, на первый взгляд, это похоже на работу :)
EleventyOne

Можете ли вы объяснить, что делает метод hide и как он работает? Вы говорите мне, что оно скрывает только окно поиска, потому что, похоже, это совсем не так
IcedDante

@IcedDante hideМетод описан здесь: api.jquery.com/hide Пока вы применяете его только к соответствующему селектору, тогда да, он должен скрывать только окно поиска. Тем не менее, существуют специфичные для плагина методы, которые можно использовать для его скрытия, и я бы порекомендовал вам использовать их (см. Ниже)
EleventyOne

Ответы:


474

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

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

14
Главная проблема, о которой говорится в билете на github, заключается в том, что на мобильном телефоне по-прежнему отображается клавиатура. Мы заменили select2 на выбранный.
toutpt

2
и это прекрасно переводится как angular-ui ui-select2!
Ригдон

Очень удобный вариант! Я использовал его, чтобы показать поиск по 10 и более опциям. Нет необходимости вручную удалять поисковый ввод.
Blazkovicz

@KevinBrown Infinityне является отрицательным значением. Ваше редактирование делает текст и код не совпадают. Проблема, связанная с определенным образом, указывает на то, что отрицательное значение является правильным поддерживаемым подходом. Проблема, связанная с этим, также гласит: «Высокое значение MinimResultsForSearch скрывает окно поиска только в открытом выделении. Но если мы наберем какую-то букву, в то время как выделение закрыто и сфокусировано - поиск всплывет, независимо от того, насколько высоко», и хотя я не могу воспроизвести эту конкретную проблему в текущей версии это может быть реальной проблемой в старых версиях. По этим причинам я откатил ваши правки.

1
Но это полностью отключает функцию поиска.
Sudip


34
.no-search .select2-search {
    нет дисплей: нет
}

$ ( "# Тест"). Выбор2 ({
    dropdownCssClass: «без поиска»
}); 

1
+1 Мне это нравится, так как оно предотвращает кратковременное появление окна поиска в пользовательском интерфейсе при выполнении запроса AJAX. это также верно для взлома -1.
SimonGates

Это, безусловно, лучший ответ на вопрос, потому что он действительно предотвращает появление события, например, «поиск ....».
Зарин Суриякун

5
Работал отлично, спасибо! Просто примечание для любого будущего Googler's, для этого требуется полная версия select2 (select2.full. *), Как указано здесь: github.com/select2/select2/issues/2879#issuecomment-149940634
Othyn

1
Спасибо, это то, что я искал, поскольку даже со скрытым окном поиска оно позволяет сохранять функциональность поиска доступной, когда вы хотите вызвать ее программно: $ ("# myselect"). Select2 ("search", "search_value")
nicolas

Действительно, это лучший вариант. Как говорит @Othyn, необходима полная версия select2.full.min.js, как описано на сайте: select2.github.io
robbpriestley

26

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


20

Удаление входных данных с помощью jQuery работает для меня:

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

Отлично, на мобильном не отображается клавиатура!
Питер Мейресоне

Это работает для всех выпадающих страниц, но я не могу настроить таргетинг только на определенные выпадающие списки. Не может быть целью, так как они не являются потомками идентификатора select2.
Шон Леброн

2
добавить обертку, чтобы указать
YAMM

3

Это лучшее решение, чистое и хорошо работающее:

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

Затем создайте класс .hidden { display;none; }


Это могло бы хорошо работать в прошлом, но не работает в последней версии select2.
Мэтт Браун

3

Если вы хотите скрыть поиск определенного раскрывающегося списка, используйте для этого атрибут id.

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

1

Если выбор - показать результаты, нужно использовать это:

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

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


1

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

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

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


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


1

Если вы хотите скрыть при первом открытии и заполняете раскрывающийся список с помощью вызова 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();
  }

1

Вы можете попробовать это

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

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

Вы можете проверить здесь в документе select2 документы select2


0

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

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

например, вы инициализировали плагин select2 в выпадающем меню с идентификатором аудитории

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

Пример работает на всех устройствах, на которых работает select2.


0

Я отредактировал select2.min.jsфайл, чтобы установить select-2__searchполе ввода, которое создается readonly="true".


0

Для множественного выбора вы должны написать 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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.