valori caricamento in Selectize.js

Question

Problema

Ho un input di testo che ho selectized come tag che funziona bene per l'interrogazione dei dati a distanza, posso cercare e persino creare nuovi oggetti di utilizzarlo e che tutto funziona bene .

Utilizzando selectize:

var $select = $('.authorsearch').selectize({ 
    valueField: 'AuthorId', 
    labelField: 'AuthorName', 
    searchField: ['AuthorName'], 
    maxOptions: 10, 
    create: function (input, callback) { 
     $.ajax({ 
      url: '/Author/AjaxCreate', 
      data: { 'AuthorName': input }, 
      type: 'POST', 
      dataType: 'json', 
      success: function (response) { 
       return callback(response); 
      } 
     }); 
    }, 
    render: { 
     option: function (item, escape) { 
      return '<div>' + escape(item.AuthorName) + '</div>'; 
     } 
    }, 
    load: function (query, callback) { 
     if (!query.length) return callback(); 
     $.ajax({ 
      url: '/Author/SearchAuthorsByName/' + query, 
      type: 'POST', 
      dataType: 'json', 
      data: { 
       maxresults: 10 
      }, 
      error: function() { 
       callback(); 
      }, 
      success: function (res) { 
       callback(res); 
      } 
     }); 
    } 
}); 

casella di testo:

<input class="authorsearch" id="Authors" name="Authors" type="text" value="" /> 

Esempi:

Poi quando seleziono uno (in questo caso 'mela') è arriva in un badge come ci si aspetterebbe, e il valore sottostante della casella di testo è ac elenco separato da omma dei valori di questi elementi.

Corrente di uscita

Il problema è quando carico una pagina e voglio valori recuperati dal database da visualizzare nel il metodo di scrittura selectized come tag, si carica solo i valori e io non può vedere invece il modo di visualizzare il displayname.

<input class="authorsearch" id="Authors" name="Authors" type="text" value="1,3,4" /> 

Desiderate Ouput

Ho provato tutti i tipi di valori per il campo valore ingressi averlo caricare gli articoli come mostrando loro displayname e non loro valori. Di seguito è riportato un esempio di un singolo oggetto restituito come JSON, essere in grado di caricare un array JSON di questi come tag selezionati sarebbe l'ideale.

[{"AuthorId":1,"AuthorName":"Test Author"}, 
{"AuthorId":3,"AuthorName":"Apple"}, 
{"AuthorId":4,"AuthorName":"Test Author 2"}] 

Come posso andare su questo? Devo formare il valore della casella di testo in un modo particolare, o devo caricare i miei valori esistenti usando qualche javascript?

Answer 1

Ho finito per utilizzare il callback onInitialize per caricare i valori JSON memorizzati in un campo data-*. Puoi vederlo in azione here in this jsfiddle.

<input class="authorsearch" id="Authors" name="Authors" type="text" value="" 
data-selectize-value='[{"AuthorId":1,"AuthorName":"Test"},{"AuthorId":2,"AuthorName":"Test2"}]'/> 

Fondamentalmente si analizza il valore data-selectize-value e poi aggiunge l'opzione (s) al selectize aggiunge poi gli oggetti stessi.

onInitialize: function() { 
    var existingOptions = JSON.parse(this.$input.attr('data-selectize-value')); 
    var self = this; 
    if(Object.prototype.toString.call(existingOptions) === "[object Array]") { 
     existingOptions.forEach(function (existingOption) { 
      self.addOption(existingOption); 
      self.addItem(existingOption[self.settings.valueField]); 
     }); 
    } 
    else if (typeof existingOptions === 'object') { 
     self.addOption(existingOptions); 
     self.addItem(existingOptions[self.settings.valueField]); 
    } 
} 

La mia soluzione fa presumere il mio oggetto JSON è formata correttamente e che si tratta di un singolo oggetto o un array oggetto, in modo che può o non può essere appropriato per qualcuno ha bisogno di altre famiglie.

Così analizza:

[{"AuthorId":1,"AuthorName":"Test"}, 
{"AuthorId":2,"AuthorName":"Test2"}] 

A:

Basato naturalmente su mie impostazioni selectize nel mio post originale sopra.

Answer 2

Grazie alla risposta e in base all'approccio onInitialize() ho trovato una soluzione simile. Nel mio caso ho solo bisogno di tradurre un valore, quindi sono stato in grado di memorizzare l'id e l'etichetta come attributi dei dati nel campo di input.

<input type="text" data-actual-value="1213" data-init-label="Label for 1213 item"> 

Poi l'inizializzazione:

onInitialize: function() { 
     var actualValue = this.$input.data('actual-value'); 
     if (actualValue){ 
      this.addOption({id: actualValue, value: this.$input.data('init-label')}); 
      this.setValue(actualValue); 
      this.blur(); 
     } 
    } 

Secondo queste opzioni:

$('input').selectize({ 
    valueField: 'id', 
    labelField: 'value', 
    searchField: 'value', 
    create: false, 
    maxItems: 1, 
    preload: true, 
    // I had to initialize options in order to addOption to work properly 
    // although I'm loading the data remotely 
    options: [], 
    load: ... , 
    render: ..., 
    onInitialize: .... 
}); 

So che questo non risponde alla tua domanda, ma ha voluto condividere solo nel caso in cui questo potrebbe aiutare qualcuno.

Answer 3

Ancora più semplice nella nuova versione di attributo selectize items. Fondamentalmente per impostare un elemento selezionato è necessario averlo prima nelle opzioni. Ma se si utilizzano dati remoti come me, le opzioni sono vuote, quindi è necessario aggiungerle in entrambe le posizioni.

$('select').selectize({ 
     valueField: 'id', 
     labelField: 'name', 
     options:[{id:'123',name:'hello'}], 
     items: ['123'], 
     ... 

Questo è il lavoro per me e mi ha portato un po 'per capirlo ... quindi basta condividere