Come iniettare le query di ricerca a livello di codice in Select2 v4?

Question

Ho creato un'app Web utilizzando una casella di ricerca Select2, che si collega al nostro back-end tramite AJAX. La casella di ricerca passa la query (ad esempio "APPLES") al back-end, che quindi aggiorna la pagina. Come faccio a inserire a livello di codice le query di ricerca nella casella di ricerca? Ho bisogno di passare il "val" in modo che select2 chiama il back-end tramite AJAX e aggiorna la pagina. Sono sicuro che questo è ovvio, ma non ho potuto trovarlo nella documentazione. Ad esempio, invece di forzare un utente a digitare "APPLES" nella casella di ricerca, desidero che l'utente faccia clic su un pulsante e compaia automaticamente la parola "APPLES" nel campo di ricerca, quindi la pagina venga visualizzata automaticamente. aggiornare.

Grazie!

---

seguito il commento di Kevin, io non sono in questo stato in cui il testo è incorporato nella casella di ricerca e il selettore ha raccolto l'articolo corretto. Come invio (o trigger) tale richiesta, ho provato "keydown", "pressdown", "invia", "click" (che cancella la casella), ecc

Answer 1

Select2 utilizzato per fornire un metodo di supporto select2('search', 'term') che avrebbe assistito con questo, ma non è stato portato a Select2 4.0.0.

ci sono un paio di modi in cui questo può essere fatto, ma in generale tutti seguono lo stesso modello di passi

1. Aprire le Select2 discesa
2. Inserisci il testo da ricercare nella casella di ricerca
3. trigger gli eventi di tastiera necessari per Select2 per avviare la ricerca (di solito input)

Quindi, in questo momento, nel Select2 4.0.0 il codice per fare che sarebbe guardare 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>

Anche se questo esempio non fa uso di AJAX, si innescherà una richiesta AJAX se Select2 è configurato per esso.

Answer 2

In aggiunta a questa risposta, stavamo cercando di aggiungere un nuovo "tag" a un select2 configurato per la codifica. Invece di attivare un evento keyup nella casella di ricerca $, abbiamo dovuto fare quanto segue.

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

Questo primo genera un evento che causa il modulo 'ricerca' in select2 per aggiungere un 'evidenziato' risultato contenente il testo tag, poi il secondo evento causa select2 al fuoco l'evento 'selezionare' interno che aggiunge un nuovo tag per le opzioni select2 e potrebbe anche innescare altre cose, a seconda di come l'hai configurato.

Answer 3

È possibile impostare minimumInputLength-0 poi nella funzione data si può verificare params.termlength e se è 0, impostare il valore di filtro al valore di ricerca predefinito.

E 'abbastanza stupido, ma funziona;)

Answer 4

per me innescare 'keyup' lavorato solo quando l'utente non ha selezionato alcuna opzione ancora. Ciò che funziona ogni volta è di attivare invece l'input. (Testato solo su Chrome)

così in base alla risposta di Kevin Brown:

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