How to change placeholder of selectize.js dropdown?

Question

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.

Conjunct

The question is unclear. What have you tried? Any code snippets? How are you updating options? – Commemorate

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

Emendate

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

Biblicist

This won't be enough, need to add 1st option item <option value="">Choose</option> – Assume

Answer 3

You need two things:

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

Shenyang

The empty <option></option> is necessary it seems. Thanks for pointing it out. – Faithless

Answer 4

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();

Turnstone

This solution worked well for me. For those who are trying to modify a selectize widget that they didn't create: s = $('select')[0].selectize; s.settings.placeholder = "new or revised placeholder"; s.updatePlaceholder(). – Grimes

Answer 5

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>

Barclay

Answer 6

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>

Interpenetrate

Answer 7

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="[email protected]" 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>

Armenta

Answer 8

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

Pinky

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

Hamsun

Answer 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%;");

Shortwinded