Jak zmienić znak zastępczy selectize.js?

Question

Chcę zmienić symbol zastępczy listy rozwijanej utworzonej przez selectize.js, gdy lista rozwijana nadrzędna zmienia swój wybór, aby załadować opcje menu rozwijanego, którego symbol zastępczy ma zostać zmieniony. Nie ma metody, aby to zrobić w dokumentacji.

Answer 1

Nie wiem, czy selectize wciąż się zmienia swój kod lub jeśli wszyscy na tym wątku tylko whiffed ale wszystkie te odpowiedzi wydają się być źle indywidualnie, ale jeśli rodzaj połączyć właściwe części z każdej odpowiedzi, którą kończysz z tym, co działa dla mnie.

 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

Można określić element zastępczy dla elementów select, dodając pusty element option wewnątrz znacznika wyboru. Oto przykład:

<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 stworzy input poniżej select. Ta input będzie miała klasę .selectize-control.

Możesz zastąpić placeholder tego pola input za pomocą jQuery.

można zrobić coś takiego:

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

Jeśli chciałbyś działający przykład, potrzebujemy więcej informacji o kodzie Ill.

Answer 4

Upewnij się, że używasz znacznika select dla selectize.
Wystąpił ten sam problem, spowodowany przez użycie danych wejściowych. selectize też działało, ale atrybut placeholder nie był wyświetlany. Kiedy zmienił się select to rozpoczął pracę

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

Answer 5

Można określić klucz placeholder jako część opcji sprzeciw podczas inicjalizacji. Nie mogłem znaleźć tej opcji w dokumentacji i tylko znalazłem ją podczas przeglądania kodu.

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

Answer 6

trzeba dwie rzeczy:

• dodać pusty <option></option> jako pierwszy tag opcji w select.
• dodać placeholder kluczem do selectize wezwanie

Answer 7

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

Answer 8

miałem podobny problem - co było frustrujące jest to, by zrobić coś takiego:

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

Wtedy dopiero po zmianie ostrości będzie renderować mój nowy tekst zastępczy. Okazuje się, że z dowolnego powodu (prawdopodobnie dobrego) selectize stosuje się szerokość tego wejścia.

rozwiązanie końcowa:

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

Answer 9

Można zaktualizować zastępczy ustawiając selectize.settings.placeholder a następnie wywołanie 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>