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

Question

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

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

Спасибо!

---

После комментария Кевина, я не в таком состоянии, когда текст вложен в SearchBox и селектор выбрал правильную позицию. Как отправить (или триггер) этот запрос, я попытался "KeyDown", "pressdown", "отправить", "нажмите" (который очищает коробку) и т.д.

Answer 1

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

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

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

Итак, прямо сейчас, в выбор2 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, если Выбор2 сконфигурирован для него.

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

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

Answer 3

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

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

Answer 4

для меня запуска «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'); 
});