Как программно вводить поисковые запросы в Select2 v4?

Раньше Select2 предоставлял вспомогательный метод select2('search', 'term'), который помогал бы в этом, но он не был перенесен в Select2 4.0.0.

Есть несколько способов, как это можно сделать, но в целом все они следуют одному и тому же шаблону шагов.

1. Откройте раскрывающийся список Select2
2. Введите искомый текст в поле поиска
3. Инициировать события клавиатуры, необходимые для того, чтобы Select2 начал поиск (обычно input)

Итак, прямо сейчас в Select2 4.0.0 код для этого будет выглядеть так:

$('select').select2();

function select2_search ($el, term) {
  $el.select2('open');
  
  // Get the search box within the dropdown or the selection
  // Dropdown = single, Selection = multiple
  var $search = $el.data('select2').dropdown.$search || $el.data('select2').selection.$search;
  // This is undocumented and may change in the future
  
  $search.val(term);
  $search.trigger('keyup');
}

$('button').on('click', function () {
  var $select = $($(this).data('target'));
  select2_search($select, 'Arizona');
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select style="width: 200px;" id="single">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<button type="button" data-target="#single">Search for 'Arizona'</button>
<br /><br />

<select style="width: 200px;" id="multiple" multiple="multiple">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<button type="button" data-target="#multiple">Search for 'Arizona'</button>

Хотя в этом примере не используется AJAX, он инициирует запрос AJAX, если для него настроен Select2.

для меня запуск «keyup» работал только тогда, когда пользователь еще не выбрал какую-либо опцию. Что работает каждый раз, так это вместо этого запускать «ввод». (проверено только в Chrome)

поэтому на основе ответа Кевина Брауна:

$('select').select2();

function select2_search ($el, term) {
  $el.select2('open');

  // Get the search box within the dropdown or the selection
  // Dropdown = single, Selection = multiple
  var $search = $el.data('select2').dropdown.$search || $el.data('select2').selection.$search;
  // This is undocumented and may change in the future

  $search.val(term);
  $search.trigger('input');
}

$('button').on('click', function () {
  var $select = $($(this).data('target'));
  select2_search($select, 'Arizona');
});

Ответы на этой странице привели меня почти туда. И поскольку у других, похоже, такие же проблемы, я делюсь тем, как я их решил.

Некоторые из комментариев к ответу Кевина Брауна спрашивали, как имитировать ENTER после того, как текст был введен и выделен.

Мне удалось это сделать только с тайм-аутом:

setTimeout(function() { $('.select2-results__option').trigger("mouseup"); }, 500);

Итак, полное решение будет таким:

$('select').select2();

function select2_search ($el, term) {
  $el.select2('open');

  // Get the search box within the dropdown or the selection
  // Dropdown = single, Selection = multiple
  var $search = $el.data('select2').dropdown.$search || $el.data('select2').selection.$search;
  // This is undocumented and may change in the future

  $search.val(term);
  $search.trigger('input');
  setTimeout(function() { $('.select2-results__option').trigger("mouseup"); }, 500);

}

$('button').on('click', function () {
  var $select = $($(this).data('target'));
  select2_search($select, 'Arizona');
});

Вы можете установить minimumInputLength на 0, затем в функции data вы можете проверить params.term length и, если это 0, установить значение фильтра на предопределенное значение поиска.

Это довольно глупо, но это работает ;)

В дополнение к этому ответу мы пытались программно добавить новый «тег» в select2, настроенный для тегирования. Вместо того, чтобы запускать событие keyup в поле поиска $, нам пришлось сделать следующее.

$search.val(tag);
$search.closest('.select2-search--inline')
    .trigger($.Event('input', { which: 13 }));
$search.closest('.select2-selection--multiple')
    .trigger($.Event('keydown', { which: 13 }));

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

Для тех, кто использует вызов Ajax для заполнения select2 и хочет найти и установить выбранное значение.

Есть и другой способ, но этот ответ отлично работает для меня с Select2 4.0.0

• Для набора ударов я использовал функцию Делея

JS

$('.select2').select2();

    function select2_search_and_set(controlId, term) {
var control = $("#" + controlId);
var $search = control.data('select2').dropdown.$search || control.data('select2').selection.$search;

$search.val(term);
$search.trigger('keyup');

setTimeout(function () {
    $search.trigger($.Event('keydown', { which: 13 }));
}, 500);
}

   select2_search_and_set("target", 'term');

HTML

<select class="form-control select2" id="target" name="target"></select>

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

С помощью комбинаций формы ответа здесь мне удалось решить мою проблему.

Сделать это:

1. Сначала мне нужно было установить для опции tags на select2 значение true

2. Не нужно было открывать select2

3. Мне нужно было изменить триггер с «keyup» на «input».

4. Мне нужно было добавить следующую строку в конце, чтобы имитировать клавишу ввода $('.select2-results__option').trigger(mouseup);

    Here is the jsfiddle sample for you to try for yourself
   

   https://jsfiddle.net/jainpankaj/o8g37wfu/8/#&togetherjs=I0e96aNexC< /а>