Jak programowo wprowadzać zapytania do Select2 v4?

Question

Zbudowałem aplikację internetową za pomocą pola wyszukiwania Select2, które łączy się z naszym zapleczem za pośrednictwem AJAX. Pole wyszukiwania przekazuje zapytanie (np. "APPLES") do zaplecza, które następnie aktualizuje stronę. Jak programowo wprowadzać zapytania do wyszukiwania w polu wyszukiwania? Muszę przekazać wartość "val", aby select2 wywoływał backend za pośrednictwem AJAX i aktualizował stronę. Jestem pewien, że jest to oczywiste, ale nie mogłem go znaleźć w dokumentacji.

Na przykład, zamiast zmuszać użytkownika do wpisania "APPLES" w polu wyszukiwania, chciałbym, aby użytkownik kliknął przycisk i automatycznie wypełnił słowo "JABŁKA" w polu wyszukiwania, a następnie wyświetlił stronę aktualizacja.

Dzięki!

---

następujący komentarz Kevina, nie jestem w tym stanie, gdzie tekst jest osadzony w polu wyszukiwania i selektor wybrał właściwą pozycję. W jaki sposób mogę złożyć (lub wyzwalacza) to prośba, próbowałem "keyDown", "pressdown", "wyślij", "click" (która czyści pole) itd

Answer 1

Wybór2 wykorzystane do zapewnienia metoda pomocnika select2('search', 'term'), która pomogłaby w tym, ale nie została przeniesiona do Select2 4.0.0.

Istnieje kilka sposobów, że można to zrobić, ale generalnie wszystkie one według tego samego wzoru kroków

1. Otwórz Wybór2 rozwijanych
2. Wpisz wyszukiwany tekst w polu wyszukiwania
3. wyzwalać zdarzenia klawiatury niezbędne dla Select2 aby rozpocząć wyszukiwanie (zwykle input)

Więc teraz, w Select2 4.0.0 kod do zrobienia, że ​​będzie wyglądać lik e

$('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>

Chociaż ten przykład nie korzysta z AJAX, będzie wyzwalać żądania AJAX jeśli Wybór2 jest skonfigurowany dla niego.

Answer 2

Jako dodatek do tej odpowiedzi, próbowaliśmy programowo dodać nowy "tag" do selektora2 skonfigurowanego do tagowania. Zamiast uruchamiać zdarzenie keyup w polu wyszukiwania $, musieliśmy wykonać następujące czynności.

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

To pierwsze pożary zdarzenie, które powoduje, że moduł „szukaj” w Select2 aby dodać „zaznaczony” wynik zawierający tekst znacznika, a następnie drugie zdarzenie powoduje select2 do ognia zdarzenie „wybierz” wewnętrznie który dodaje nowy tag opcji select2 i może także wyzwalać inne rzeczy, w zależności od tego, jak je skonfigurowałeś.

Answer 3

Można ustawić minimumInputLength do 0 następnie w funkcji data można sprawdzić params.termlength a jeśli jest to 0, należy ustawić wartość filtra do zadanej wartości wyszukiwania.

To dość głupie, ale działa;)

Answer 4

dla mnie wyzwolenie „keyUp” działa tylko wtedy, gdy użytkownik nie wybrano jeszcze żadnych opcji. To, co działa za każdym razem, to wywołanie "input". (Tylko przetestowane w Chrome)

więc na podstawie Kevina Browna odpowiedź:

$('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'); 
});