Как изменить местозабор выпадающего списка selectize.js?

Question

Я хочу изменить placeholder выпадающего списка, созданного selectize.js, когда раскрывающееся меню родителя изменит его выбор, чтобы загрузить параметры выпадающего списка, чей заполнитель будет изменен. В документации нет способа сделать это.

Answer 1

Не уверен, что если selectize постоянно меняется их код или, если все остальные на этой теме только whiffed, но все эти ответы, как представляется, не так индивидуально, но если вы вид объединить правильные части от каждого ответа, который вы заканчиваете тем, что работает для меня.

 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

Вы можете указать placeholder для select элементов, добавив пустой элемент option внутри тега select. Вот пример:

<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 создаст input ниже select. Этот input будет иметь класс .selectize-control.

Вы можете заменить placeholder этого поля input на jQuery.

Вы можете сделать что-то вроде:

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

Если вы хотите рабочий пример, Ill нужно больше информации о вашем коде.

Answer 4

Убедитесь, что вы используете тег select для selectize.
У меня была та же проблема, вызванная использованием ввода. selectize тоже работал, но атрибут placeholder не отображался. Когда я изменил к select он начал работать

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

Answer 5

Вы можете указать placeholder ключ, как часть параметров объекта при инициализации. Я не мог найти вариант в документации и только нашел, что он копает код.

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

Answer 6

Вам нужно две вещи:

• добавить пустую <option></option> в качестве первого варианта тега в избранных.
• добавить placeholder ключ к selectize вызова

Answer 7

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

Answer 8

У меня была аналогичная проблема - то, что было неприятно, я бы что-то вроде этого:

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

Тогда только после изменения фокуса это сделало бы мой новый замещающий текст. Оказывается, по какой-либо причине (вероятно, хорошая) selectize применяет ширину к этому входу.

Окончательное решение:

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

Answer 9

Вы можете обновить заполнитель, установив selectize.settings.placeholder и затем вызвать 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>