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
我试图把它不起作用几个事件。
有人可以帮助我如何解决这个问题吗?
答
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%
每当我更新我的选择,即使我删除了所有选项,这将工作。
希望这会有所帮助。
为什么不提供一个jsfiddle,以便有人可以修复它,无论是css问题还是selectize问题。 – nivas
如果您想在每次移除标签时重新加载,请选择[updatePlaceholder](https://github.com/selectize/selectize.js/blob/master/docs/api.md)方法。 – nivas