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

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

7
dynamic javascript jquery placeholder selectize.js

9 ответов

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

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

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

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

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

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

вы можете указать заполнитель для 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>
2

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

<select type="text" placeholder="Type words of the article..."></select>
1
$('select#my-dropdown + .selectize-control').find('.selectize-control-input').prop({'placeholder': 'Placeholder Text'});
1

selectize.js создать input ниже select. Это input будет класс .selectize-control.

можно заменить на placeholder этой input поле с помощью jQuery.

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

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

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

0

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

$("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%;");
0

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