Rendering personalizzato Selectize.js con html statico

Question

Sto utilizzando la brillante libreria selectize.js per generare una casella di selezione attraente con gruppi di opzioni. Funziona tutto ma sono bloccato al punto che non posso usare il renderizzatore personalizzato dalla pagina degli esempi (Contatti e-mail) http://brianreavis.github.io/selectize.js/ perché "elemento" non conosce l'attributo "email". So come farlo in javascript, ma come potrei definire i due attributi in html statici?

In js, questo woulde essere

$('#id').selectize({ 
    ... 
    options: [ 
    { name: "Martin", email: "martin@asdf.at" } 
    ], 
    .... 
} 

Ho provato il seguente:

<select> 
    <option value="Martin|martin@asdf.at" data-name="Martin" data-email="martin@asdf.at"> 
    Martin 
    </option> 
</select> 

Ma questo non funziona ... Infine, la funzione di presa dagli esempi rendering:

render: { 
    item: function(item, escape) { 
     return '<div>' + 
      (item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') + 
      (item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') + 
     '</div>'; 
    }, 
    option: function(item, escape) { 
     var label = item.name || item.email; 
     var caption = item.name ? item.email : null; 
     return '<div>' + 
      '<span class="label">' + escape(label) + '</span>' + 
      (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') + 
     '</div>'; 
    } 
} 

Sarei grato per qualsiasi suggerimento!

saluti, Martin

Answer 1

utilizzare questo esempio:

var clearhack = $('.selectized').selectize({ 
    valueField: 'id', 
    labelField: 'name', 
    searchField: ['name'], 
    sortField: 'score',//this is set to 'name' on my version, but seems sortField is only used together with load-function and score-function 
    sortDirection: 'desc', 
    maxItems: 1, 
    //only using options-value in jsfiddle - real world it's using the load-function 
    options: [ 
     {"id":861,"name":"Jennifer","score":6}, 
     {"id":111,"name":"Jenny","score":6}, 
     {"id":394,"name":"Jorge","score":6}, 
     {"id":1065,"name":"Jorge Carlson","score":6}, 
     {"id":389,"name":"Ann Jennifer","score":3}, 
     {"id":859,"name":"Bobby Jenkins","score":3}, 
     {"id":264,"name":"Peter Jenkins","score":3}, 
     {"id":990,"name":"Fred","score":1}, 
     {"id":349,"name":"Kal","score":1}, 
     {"id":409,"name":"Louis","score":1} 
    ], 
    create: false, 
    render: { 
     option: function(item, escape) { 
      return '<div>' 
      + '<span>ID:'+item.id+'</span> ' 
      + '<span>Name:'+item.name+'</span> ' 
      + '<span>DEBUG:'+item.score+'</span>' 
      + '</div>'; 
     } 
    }, 
    score: function(search) { 
     return function(item) { 
      return parseInt(item.score); 
     }; 
    } 
}); 

Answer 2

non sono sicuro se questo aiuterà come è super tardi - ma ho usato il seguente metodo per ottenere le didascalie sotto le mie selezionare le opzioni:

opzioni HTML come:

<option data-data='<?php echo json_encode($obj, JSON_FORCE_OBJECT) ?>' value="<?php echo $obj->id ?>"><?php echo $obj->name ?></option> 

e poi selectize Codice:

$('select#my-select').selectize({ 
    valueField: 'id', 
    labelField: 'name', 
    searchField: ['name'], 
    render: { 
    option: function(item, escape) { 
     var label = item.name; 
     var caption = item.description; 
     return '<div>' + 
     '<span style="display: block; color: black; font-size: 14px;">' + escape(label) + '</span>' + 
     (caption ? '<span style="display: block; color: gray; font-size: 12px;">' + escape(caption) + '</span>' : '') + 
     '</div>'; 
    } 
    } 
}); 

non hanno letto un sacco di documenti, ma questo lavoro per $ obj come ad esempio:

{ 'id': '1', 'name': 'fred', 'description': 'fred person'} 

Basta aggiungere più attributi e riferimento nella funzione opzione di rendering.

Sembra selectly legge json da un attributo dati-dati per popolare questi, ma credo che è possibile modificare quale attributo legge json passando l'opzione dataAttr in fase di inizializzazione.

Answer 3

Ho avuto lo stesso problema un paio di minuti fa. Ho aggiungere po 'di codice per selectize.js

in funzione init_select e accanto addOption dopo il codice di default, ho aggiungo:

/// iterate on data attr on <option> 
    $.each($option.data(), function(i, v) { 
     option[i] = v; 
    }); 

Incolla questo codice di seguito: linee originali

var option    = readData($option) || {}; 
option[field_label] = option[field_label] || $option.text(); 
option[field_value] = option[field_value] || value; 
option[field_optgroup] = option[field_optgroup] || group; 

Dopo questo mio metodo di rendering in selectize funziona bene con attributi di dati statici :)