selectize.js 占位符宽度问题

Question

我正在使用 selectize.js jquery 库来实现自动完成（自动建议）功能。

除占位符问题外，一切正常。

下面是我的代码。

HTML 代码

<input class="form-control" 
                   aria-describedby="basic-addon2"

                   name="q" 
                   id="q"
                   data-request="" 
                   data-request-success="console.log(data)" 
                   data-track-input="true" 
                   autocomplete="off" 
                   value="{{ search_value.q }}"
                   type="text">

JAVASCRIPT 代码

$('#q').selectize({
    plugins: ['remove_button'],
    valueField: 'address',
    labelField: 'address',
    searchField: 'address',   
    placeholder:'Search Properties by suburb, region, postcode or address',                  
    create: true,    
    render: {
        item: function(data, escape) {
            return '<div>' + escape(data.address) + '</div>';
        }

    },
    load: function(query, callback) {
        if (!query.length) return callback();
        $.ajax({
            url:  base_url + '/search-property-autocomplete',
            type: 'POST',
            dataType: 'json',
            data: {
                q: query,

            },
            error: function() {
                callback();
            },
            success: function(res) {
                console.log(res.properties);
                callback(res.properties);
            }
        });
    }
});
$(".selectize-input input[placeholder]").attr("style", "width: 100%;");

这是我加载页面时的样子。

它显示占位符的全文..但是当我要输入并获得提示和select任何东西以及当我清除所有项目时，它的宽度减小并显示如下所示。

正如我们所见，占位符文本正在剪切。

这是一个视频 link 目前的表现 - http://www.screencast.com/t/B1w1TssUAelI

我试过添加一些不起作用的事件。

谁能帮我解决这个问题？

Answer 1

好的，伙计们，最终我解决了这个问题，下面是我放入 javascript 文件中的代码。

JAVASCRIPT 代码

$('#q').selectize({
    plugins: ['remove_button'],
    valueField: 'address',
    labelField: 'address',
    searchField: 'address',                 
    create: true,    
    render: {
        item: function(data, escape) {
            return '<div>' + escape(data.address) + '</div>';
        }

    },
    onChange: function(value) {
      $(".selectize-input input[placeholder]").attr("style", "width: 100%;");
    },
    load: function(query, callback) {
        if (!query.length) return callback();
        $.ajax({
            url:  base_url + '/search-property-autocomplete',
            type: 'POST',
            dataType: 'json',
            data: {
                q: query,

            },
            error: function() {
                callback();
            },
            success: function(res) {
                console.log(res.properties);
                callback(res.properties);
            }
        });
    }
});

$(".selectize-input input[placeholder]").attr('placeholder','Search Properties by suburb, region, postcode or address');
$(".selectize-input input[placeholder]").attr("style", "width: 100%;");

正如您在上面的代码中看到的，我在其中添加了以下代码。

onChange: function(value) {
  $(".selectize-input input[placeholder]").attr("style", "width: 100%;");
},

每当我更新我的选择时，这会将宽度设置为 100%，即使我删除了所有选择，这也会起作用。

希望这对您有所帮助。

selectize.js 占位符宽度问题

selectize.js placeholder width issue

javascript

jquery

html

css

selectize.js