Selectize.js rendu personnalisé avec html statique

Je suis en utilisant le brillant selectize.js bibliothèque pour générer un attrayant boîte de sélection avec option de groupes. C'est tout un travail, mais je suis coincé au point que je ne peux pas utiliser le moteur de rendu personnalisé à partir de la page des exemples (liste de contacts) http://brianreavis.github.io/selectize.js/ parce que "point" ne connaît pas de "e-mail" attribut. Je sais comment le faire en javascript, mais comment pourrais-je définir les deux attributs html statique?

En js, ce woulde être

$('#id').selectize({
  ...
  options: [
    { name: "Martin", email: "[email protected]" }
  ],
  ....
}

J'ai essayé le suivant:

<select>
  <option value="Martin|[email protected]" data-name="Martin" data-email="[email protected]">
    Martin
  </option>
</select>

Mais cela ne fonctionne pas... Enfin la fonction rendu prises à partir de ces exemples:

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>';
    }
}

Je serais reconnaissant pour tous les conseils!

Ce qui concerne,
Martin

Avez-vous géré cette question? Je veux afficher les éléments personnalisés, mais ne voulez pas utiliser de l'ajax pour obtenir les données. Juste envie de le faire avec du HTML statique en quelque sorte
Bonjour. Avez-vous le résoudre ? Je suis un peu du même bateau.

OriginalL'auteur Martin Horvath | 2014-04-21

  1. 9

    Utiliser cet exemple:

    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);
};
}
});
    Cela ne répond pas à la question

    OriginalL'auteur Adonias

  2. 1

    Ne sais pas si cela va aider c'est super en retard mais j'ai utilisé la méthode suivante pour obtenir des légendes sous mon sélectionnez options:

    html des options comme:

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

    et puis selectize code:

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

    N'ai pas lu beaucoup de docs, mais cela fonctionne pour $obj tels que:

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

    Simplement ajouter plus d'attributs et de les référencer dans votre rendu option fonction.

    Il semble selectize lit json à partir de données d'attributs de données pour remplir ces, mais je crois que vous pouvez modifier quel attribut il lit json à partir en passant un dataAttr option dans l'initialiser.

    Mais comment trouver l'option attributs de la balise à l'intérieur de rendu ?

    OriginalL'auteur DJB

  3. 0

    J'ai eu le même problème quelques minutes auparavant.
    J'ai ajouter un peu de code pour selectize.js

    En fonction init_select et suivant addOption après le code par défaut, j'ai ajouter:

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

    De coller ce code ci-dessous des lignes originales:

    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;

    Après cela, ma méthode render dans selectize fonctionne très bien avec des données statiques attributs 🙂

    cela semble être une approche intelligente pour résoudre un souvent dans les discussions Selectize question... pensez que vous pouvez élaborer sur cette solution un peu?
    que voulez-vous dire? 🙂 voulez-vous dire l'extension de selectize? Ceci est une ancienne réponse peut-être que le problème est résolu de la boîte de droite maintenant

    OriginalL'auteur robertw