selectize.js占位符宽度问题

问题描述：

我正在使用selectize.js自动完成（自动建议）功能的jQuery库。selectize.js占位符宽度问题

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

下面是我的代码，我所做的。

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%;");

这是它的外观，当我加载页面等。

其显示占位符的全文..但是当我即将键入并获得提示，选择什么，当我清理所有项目，其宽度减少，显示类似下面。

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

这是一个视频链接如何其运行得的那一刻 - http://www.screencast.com/t/B1w1TssUAelI

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

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

为什么不提供一个jsfiddle，以便有人可以修复它，无论是css问题还是selectize问题。 – nivas

如果您想在每次移除标签时重新加载，请选择[updatePlaceholder]（https://github.com/selectize/selectize.js/blob/master/docs/api.md）方法。 – nivas

答

OK伙计们，最终我解决了这个问题，下面是我放在我的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占位符宽度问题

相关推荐