Question

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

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

以下是我所做的代码。

HTML CODE

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

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

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

它显示占位符的全文..但是当我打算输入并获取提示并选择任何内容时，当我清除所有项目时，它的宽度会减小并显示如下所示。

正如我们所看到的，占位符文本正在切割。

这是一个视频链接，目前其表现如何 - http://www.screencast.com/t/B1w1TssUAelI

我试图把几个不起作用的事件。

有人可以帮我解决这个问题吗？

Answer 1

好的家伙，最终我已经解决了这个问题，下面是我在javascript文件中输入的代码。

JAVASCRIPT CODE

$('#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占位符宽度问题

1 个答案: