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 任何東西時，當我清除所有項目時，它的寬度減小並顯示如下所示。

如我們所見，占位符文本正在剪切。

這是一個視頻鏈接，它目前的行為如何 - 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% ，這將起作用。

希望這可以幫助。

Answer 2

我發現使用 bootstrap，輸入上的 class of.form-control 神奇地解決了我使用 selectize 調整大小的問題。