Comment modifier le menu déroulant du menu déroulant selectize.js?

Je souhaite modifier l'espace réservé d'un menu déroulant créé par selectize.js lorsque le menu déroulant principal modifie sa sélection pour charger les options du menu déroulant dont l'espace réservé doit être modifié. Il n'existe aucune méthode pour le faire dans la documentation.

Je ne sais pas si la sélectivité continue de changer de code ou si tout le monde sur ce fil vient de fumer, mais toutes ces réponses semblent être fausses individuellement, mais si vous combinez les pièces correctes de chaque réponse, vous finissez par cela qui fonctionne pour moi.

var textHandler = function(name) { return function() { if(name == 'focus'){ jQuery("select#myid + .selectize-control").find("input:text").prop({"placeholder": ""}); } }; }; jQuery('#sf159_textsearchtextsearch').selectize({ closeAfterSelect: true, hideSelected : true, createOnBlur : true, openOnFocus : true, maxOptions : 10, persist : true, placeholder : "Neighborhood, Street, School, Zip, MLS", plugins : ['remove_button'], valueField : 'id', labelField : 'text', searchField : 'value', options : [], create : false, render : { option: function (item, escape) { //console.log(item); var address = ''; var keyword = ''; var tx = item.text.split(','); for (var i = 0, n = tx.length; i < n; i++) { address += '<span class="span4">' + escape(tx[i]) + '</span>'; } var template = '<div>' + '<div class="row-fluid"> ' + address + ' </div>' + '</div>'; return template; } }, load : searchHandler, onKeydown : keyHandler, onDelete : deleteHandler, onFocus : textHandler('focus'), });

Vous pouvez spécifier une clé d' placeholder dans le cadre de l'objet d'options lors de l'initialisation. Je n'ai pas trouvé l'option dans la documentation et je n'ai trouvé que creuser le code.

 //init selectize $(function() { $('select').selectize({ placeholder: 'Click here to select ...', }); });

Vous avez besoin de deux choses:

Ajouter vide <option></option> comme première balise d'option dans la sélection.
Ajouter la touche placeholder pour selectize appel

Vous pouvez spécifier un espace réservé pour select éléments en ajoutant un élément d' option vide à l'intérieur de la balise de sélection. Voici un exemple:

 <select name="color" required> <option value=""> Select a color </option> <option value="1"> Lavender </option> <option value="2"> Eggplant </option> <option value="3"> Cool grey </option> <option value="4"> Bitter lemon </option> </select>

Assurez-vous d'utiliser une étiquette de select pour selectize .
J'avais le même problème, causé par l'utilisation d'une entrée à la place. selectize travaillé aussi, mais l'attribut placeholder n'a pas été affiché. Quand j'ai changé pour select il a commencé à fonctionner

 <select type="text" placeholder="Type words of the article..."></select>

 $('select#my-dropdown + .selectize-control').find('.selectize-control-input').prop({'placeholder': 'Placeholder Text'});

Selectize.js créera une input dessous de la select . Cette input aura la classe .selectize-control .

Vous pouvez remplacer l' placeholder de ce champ de input par jQuery.

Vous pouvez faire quelque chose comme:

 $(".selectize-control").attr('placeholder','Hello World!');

Si vous souhaitez un exemple pratique, j'ai besoin de plus d'informations sur votre code.

J'ai eu un problème similaire – ce qui était frustrant, c'est que je ferais quelque chose comme ça:

 $("selectize-input input[placeholder]").attr('placeholder','Hello World!');

Ensuite, seulement après avoir changé la mise au point, cela rendrait mon nouveau texte d'espace réservé. Il s'avère que, pour une raison quelconque (probablement une bonne), la sélectivité applique une largeur à cette entrée.

Solution finale:

 $(".selectize-input input[placeholder]").attr('placeholder','Hello World!'); $(".selectize-input input[placeholder]").attr("style", "width: 100%;");

Vous pouvez mettre à jour l'espace réservé en configurant selecttize.settings.placeholder puis en appelant selectize.updatePlaceholder () .

 $(document).ready(function() { var s = $('#input-tags').selectize({ persist: false, createOnBlur: true, create: true, placeholder: 'start placeholder' })[0].selectize; $('#updatePlaceholder').click(function() { s.settings.placeholder = 'new placeholder'; s.updatePlaceholder(); }); });

 <!DOCTYPE html> <html> <head> <script data-require="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.js"></script> <script src="script.js"></script> </head> <body> <h1>Selectize setting placeholder</h1> <input type="text" id="input-tags" value=""> <button id="updatePlaceholder">change</button> </body> </html>