How to change placeholder of selectize.js dropdown?

问题

I want to change placeholder of a dropdown created by selectize.js when the parent dropdown changes its selection to load the options of the dropdown whose placeholder to be changed. There is no method to do this in documentation.

回答1:

Not sure if selectize keeps changing their code or if everyone else on this thread just whiffed but all of these answers seem to be wrong individually, but if you kind of combine the correct parts from each answer you wind up with this which works for 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'),
    });

回答2:

You can specify a placeholder key as part of the options object when initialising. I couldn't find the option in the documentation and only found it digging through the code.

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

回答3:

You need two things:

add empty <option></option> as first option tag in the select.
add placeholder key to selectize call

回答4:

You can specify placeholder for select elements by adding an empty option element inside select tag. Here is an example:

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

回答5:

Make sure you use a select tag for selectize.
I was having the same problem, caused by using an input instead. selectize worked too, but the placeholder attribute wasn't being displayed. When I changed to a select it started working

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

回答6:

This is what worked for me (selectize version "selectize": "^0.12.4" and using typescript only):

this.selectize = $(this.select).selectize({
  options: this.options,
  placeholder: 'My Placeholder'
})[0].selectize;

this.selectize.settings.placeholder = 'Another Placeholder';
this.selectize.updatePlaceholder();

回答7:

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

回答8:

You can update the placeholder by setting selectize.settings.placeholder and then calling 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>

回答9:

selectize.js will create an input below the select. This input will have the class .selectize-control.

You can replace the placeholder of this input field with jQuery.

You can do something like:

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

If you would like a working example, Ill need more information about your code.

回答10:

I had a similar issue - what was frustrating is I would do something like this:

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

Then only after changing the focus it would render my new placeholder text. It turns out that for whatever reason (probably a good one) selectize applies a width to this input.

Final solution:

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

来源：https://stackoverflow.com/questions/19143364/how-to-change-placeholder-of-selectize-js-dropdown

标签

javascript

jquery

dynamic

placeholder

selectize.js