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

Я создал веб-приложение, используя окно выбора Select2, которое подключается к нашему серверу через AJAX. Поле поиска передает запрос (например, APPLES) на бэкэнд, который затем обновляет страницу. Как программно вводить поисковые запросы в поле поиска? Мне нужно передать "val", чтобы select2 вызывал бэкэнд через AJAX и обновлял страницу. Я уверен, что это очевидно, но я не смог найти его в документации.

Например, вместо того, чтобы заставить пользователя вводить "Яблоки" в поле поиска, я хотел бы, чтобы пользователь нажал кнопку и автоматически заполнил слово "APPLES" в поле поиска, а затем обновил страницу.

Спасибо!

Следуя комментарию Кевина, я не в этом состоянии, где текст встроен в поисковую строку, и селектор выбрал правильный элемент. Как отправить (или запустить) этот запрос, я попробовал "keydown", "pressdown", "submit", "click" (который очищает поле) и т.д.

Ответ 1

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

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

Откройте раскрывающийся список Select2
Введите текст поиска в поле поиска
Запуск событий клавиатуры, необходимых для выбора2, чтобы начать поиск (обычно 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>

Ответ 2

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

$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 для запуска события "select", которое добавляет новый тег к select2 и может также запускать другие вещи, в зависимости от того, как вы его настроили.

Ответ 3

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

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

Ответ 4

для меня запуск "keyup" срабатывал только тогда, когда пользователь еще не выбрал какой-либо параметр. То, что работает каждый раз, это инициировать "enter". (проверяется только на 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');
});