select2 e dati remoti: valore preimpostato e testo che evita il round-trip del server

Question

Sto generando i miei tag HTML lato server (asp.net mvc4).
Vorrei preimpostare il valore e la descrizione del mio campo HIDDEN evitando la chiamata ajax per recuperare i dati nella funzione initSelection.

Ho visto l'impostazione dei valori utilizzando javascript qualcuno:

$("#select2Test").select2('data', { id: 20832, text: 'LONDON' }) 

ma ancora mi richiederebbe extra-codice per ottenere qualcosa che è stato già in streaming dal server in un ViewModel.

mi è venuta in mente qualcosa di simile:

<input type="hidden" id="select2Test" name="select2Test" value="20832" data-option="LONDON" /> 

Ho usato un attributo dati HTML5 data-option con la descrizione della mia ricerca e ho implementato la funzione initSelection modo che io possa leggere il valore del mio campo ed è attributo data:

initSelection: function (item, callback) { 
    var id = item.val(); 
    var text = item.data('option'); 
    var data = { id: id, text: text }; 
    callback(data); 
}, 

ho visto che initSelection viene chiamato solo quando il campo nascosto ha un valore impostato.
Tutto sembra funzionare correttamente.

Ci sono delle opzioni migliori?

Answer 1

data-option combinato con una personalizzata initSelection ha fatto il trucco.

$("#lookup_id").select2({ 
     minimumInputLength: 3, 
     multiple: false, 
     allowClear: true, 
     ajax: { 
      url: urlFetchCity, 
      dataType: 'json', 
      type: "POST", 
      data: function (term, page) { return { city: term }; }, 
      results: function (data, page) { 
       return { 
        return {results: data}; 
       }; 
      } 
     }, 
     initSelection: function (item, callback) { 
      var id = item.val(); 
      var text = item.data('option'); 
      var data = { id: id, text: text }; 
      callback(data); 
     }, 
     formatResult: function (item) { return ('<div>' + item.id + ' - ' + item.text + '</div>'); }, 
     formatSelection: function (item) { return (item.text); }, 
     escapeMarkup: function (m) { return m; } 
    }); 

per coloro che sono interessati ho creato un GitHub repository dove è possibile trovare un ASP.NET MVC4 progetto in cui ho aggiunto un helper HTML per creare un select2 tag con tutte le caratteristiche per la convalida sul lato client.