Come modificare il segnaposto del menu a discesa selectize.js?

Question

Desidero modificare il segnaposto di un menu a discesa creato da selectize.js quando il menu a discesa principale cambia la selezione per caricare le opzioni del menu a discesa di cui si desidera modificare il segnaposto. Non c'è alcun metodo per farlo nella documentazione.

Answer 1

Non sono sicuro se selectize mantiene cambiare il loro codice o se tutti gli altri in questa discussione solo whiffed ma tutte queste risposte sembrano essere sbagliato singolarmente, ma se tipo di combinare le parti corrette di ogni risposta che si finisce con questo che funziona per me.

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

Answer 2

È possibile specificare il segnaposto per gli elementi select aggiungendo un elemento vuoto option all'interno del tag select. Ecco un esempio:

<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> 

Answer 3

selectize.js creeranno un input sotto il select. Questo input avrà la classe .selectize-control.

È possibile sostituire lo placeholder di questo campo input con jQuery.

Si può fare qualcosa di simile:

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

Se volete un esempio di lavoro, Ill Occorrono maggiori informazioni per il vostro codice.

Answer 4

Assicurarsi di utilizzare un tag select per selectize.
Avevo lo stesso problema, causato dall'utilizzo di un input. selectize ha funzionato anche, ma l'attributo placeholder non veniva visualizzato. Quando ho cambiato ad un select ha cominciato a lavorare

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

Answer 5

È possibile specificare una chiave placeholder come parte delle opzioni oggetto quando l'inizializzazione. Non ho trovato l'opzione nella documentazione e l'ho trovata solo scavando nel codice.

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

Answer 6

avete bisogno di due cose:

• aggiungono vuoto <option></option> come primo tag opzione nel selezionare.
• aggiungere placeholder chiave per selectize chiamata

Answer 7

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

Answer 8

ho avuto un problema simile - quello che era frustrante è che vorrei fare qualcosa di simile:

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

Poi solo dopo aver cambiato il focus si renderebbe il mio nuovo testo segnaposto. Si scopre che per qualunque ragione (probabilmente una buona) selectize applica una larghezza a questo input.

soluzione finale:

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

Answer 9

È possibile aggiornare il segnaposto impostando selectize.settings.placeholder e quindi chiamando 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="jquery@3.1.1" 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>