opzioni Select2 di default con l'Ajax

Question

ho prossima struttura html

<select class="change_item_dropdown_ajax form-control" id="item_id" name="item_id" onchange="updateData(this, this.value, 16)" > 
<optgroup label="System Data"> 
    <option value="17">Test</option> 
    <option selected="selected" value="18">System</option> 
</optgroup> 
</select> 

Javascript

$(".change_item_dropdown_ajax").select2({ 
     ajax: { 
      url: "get_user_items", 
      dataType: 'json', 
      delay: 250, 
      theme: "classic", 
      data: function (params) { 
       return { 
        q: { name_contains: params.term } // search term 
       }; 
      }, 
      processResults: function (data) { 
       return { 
        results: data 
       }; 
      }, 
      cache: true 
     }, 
     allowClear: true, 
     placeholder: '--- Please select item ---', 
     minimumInputLength: 1 
    }); 

voglio fare la possibilità per il cliente di vedere alcune opzioni di default del sistema con elementi <optgroup label="System Data">, ma anche aggiungere capacità di effettuare ricerche su query ajax con i propri articoli.

Tuttavia dopo select2 vincolante non mostra <optgroup label="System Data">...</optgroup>,

select2 opzioni sono vuoti e solo display suggerimento "Si prega di inserire 1 o più caratteri".

Non è nemmeno chiaro se è possibile farlo, grazie.

UPD Relativi a select2 removes default options when using ajax

Select-2 rimuove opzioni quando si utilizza l'adattatore Ajax.

UPD2 problema github https://github.com/select2/select2/issues/3828

Answer 1

Se si vuole avere un <optgroup> che è sempre visibile, indipendentemente che cosa il client cerca, e sotto, in un'altra <optgroup>, si vogliono vedere i risultati di ricerca, prova questo fuori:

Nello script lato server, dove si sta elaborando la query di ricerca, il client ha digitato, si dovrebbe restituire un json_encoded array con gli elementi che si desidera visualizzare nella casella di selezione. Invece di questo, prova a fare qualcosa di simile:

** codice modificato secondo la vostra richiesta nel commento DOMANDA **

$q=$_REQUEST['q']; //the query string passed, note, that if you have minimumInputLength set, until that inputLength is reached, this part of the code won't run, so if you require the minimumInputLength, you should play with the templateResult option of select2 
if (empty($q)) { 
    $results=array(); 
    $result[0]=array(); //an optgroup to display when no query was sent 
    $result[0]['text']='System Data'; 
    $result[0]['children']=array(); 
    // populate your first optgroup here, using the format which you are sending to select2. 
} else {  
    $result[0]=array(); //an optgroup for results for the users searches 
    $result[0]['text']='User results'; 
    $result[0]['children']=array(); 
    //populate the children array with the search related results 
} 

// json_encode the $result array, and return it 

Sto usando un codice simmilar, che funziona flawlesly al mio fianco, ma è possibile che alcune altre cose debbano essere impostate prima che funzioni (ho scritto il codice qualche mese fa, e ricordo che ho avuto un po 'di difficoltà a capirlo), se questo approccio non funziona, avvisami e guarderò nel mio codice per vedere come l'ho fatto esattamente.

Answer 2

Possibile (e, purtroppo, penso che l'unica) soluzione in questo caso è la scrittura dell'adattatore personalizzato. Qualcosa di simile a questo:

$.fn.select2.amd.define('select2/data/extended-ajax',['./ajax','../utils','jquery'], function(AjaxAdapter, Utils, $){ 

    function ExtendedAjaxAdapter ($element,options) { 
    //we need explicitly process minimumInputLength value 
    //to decide should we use AjaxAdapter or return defaultResults, 
    //so it is impossible to use MinimumLength decorator here 
    this.minimumInputLength = options.get('minimumInputLength'); 
    this.defaultResults  = options.get('defaultResults'); 

    ExtendedAjaxAdapter.__super__.constructor.call(this,$element,options); 
    } 

    Utils.Extend(ExtendedAjaxAdapter,AjaxAdapter); 

    //override original query function to support default results 
    var originQuery = AjaxAdapter.prototype.query; 

    ExtendedAjaxAdapter.prototype.query = function (params, callback) { 
    var defaultResults = (typeof this.defaultResults == 'function') ? this.defaultResults.call(this) : this.defaultResults; 
    if (defaultResults && defaultResults.length && (!params.term || params.term.length < this.minimumInputLength)){ 
     var processedResults = this.processResults(defaultResults,params.term); 
     callback(processedResults); 
    } 
    else { 
     originQuery.call(this, params, callback); 
    } 
    }; 

    return ExtendedAjaxAdapter; 
}); 

https://gist.github.com/govorov/3ee75f54170735153349b0a430581195

Questo adattatore analizza primo termine di ricerca. AjaxAdapter verrà avviato se il termine è più lungo di minimumInputValue. Altrimenti, defaultResults verrà passato al callback.

Per utilizzare questo adattatore, basta passare questo per Select2 opzioni:

dataAdapter: $.fn.select2.amd.require('select2/data/extended-ajax') 

non sto usando requireJS o AMD, se lo fai, utilizzarlo per richiedere adattatore.