selectize.jsプレースホルダの幅の問題

Question

私はselectize.jsオートコンプリート（autosuggest）機能の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 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

OK皆さん、これを解決しましたが、私は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%に幅を設定します。

これが役に立ちます。