jQuery 如何更改 selectize.js 下拉列表的占位符？

How to change placeholder of selectize.js dropdown?

提问by freezer

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.

当父下拉列表更改其选择以加载要更改其占位符的下拉选项时，我想更改由 selectize.js 创建的下拉列表的占位符。文档中没有方法可以做到这一点。

采纳答案by oasisfleeting

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.

不确定 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'),
    });

回答by johnz0r

You can specify a placeholderkey 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.

您可以placeholder在初始化时指定一个键作为选项对象的一部分。我在文档中找不到该选项，只能在代码中找到它。

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

回答by MikDiet

You need two things:

你需要两件事：

• add empty <option></option>as first option tag in the select.
• add placeholderkey to selectizecall

• <option></option>在选择中添加空作为第一个选项标签。
• 添加通话placeholder键selectize

回答by erandros

Make sure you use a selecttag for selectize.
I was having the same problem, caused by using an input instead. selectizeworked too, but the placeholderattribute wasn't being displayed. When I changed to a selectit started working

确保您使用select标签selectize.
我遇到了同样的问题，这是由于使用输入引起的。selectize也有效，但未placeholder显示该属性。当我改为 aselect它开始工作

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

回答by kaktusgruen

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

这对我有用（选择版本"selectize": "^0.12.4"并仅使用打字稿）：

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

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

回答by Meti

You can specify placeholder for selectelements by adding an empty optionelement inside select tag. Here is an example:

您可以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>

回答by Robin Maben

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

回答by Cas Bloem

selectize.jswill create an inputbelow the select. This inputwill have the class .selectize-control.

selectize.js将input在select. 这input将有类.selectize-control。

You can replace the placeholderof this inputfield with jQuery.

您可以用 jQuery替换placeholder此input字段的 。

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.

如果您想要一个工作示例，我需要有关您的代码的更多信息。

回答by Nathan Bertram

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.

然后只有在更改焦点后，它才会呈现我的新占位符文本。事实证明，无论出于何种原因（可能是一个好原因）， selectize 都会对这个输入应用一个宽度。

Final solution:

最终解决方案：

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

回答by JayChase

You can update the placeholder by setting selectize.settings.placeholderand then calling selectize.updatePlaceholder().

您可以通过设置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="[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>