Jquery自动完成不在下拉列表中显示2个或多个空格
问题描述:
在JQuery自动填充中,由于jquery插件本身正在修剪下拉项目,因此在单词之间具有多个空格的差异的类似项目在下拉列表中显示为重复项目。Jquery自动完成不在下拉列表中显示2个或多个空格
var validOptions =["Item 1", "Item 1", "Item 1", "Item 2", "Item 2"];
previousValue = "";
$('#ac').autocomplete({
autoFocus: true,
source: validOptions,
}).keyup(function() {
var isValid = false;
for (i in validOptions) {
if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
isValid = true;
}
}
if (!isValid) {
this.value = previousValue
} else {
previousValue = this.value;
}
});
有什么办法,以显示在下拉项目的价值本身。
答
您需要在HTML呈现过程中为li元素white-space: pre-wrap
应用小css。
下面是完整的片段
var validOptions = ["Item 1", "Item 1", "Item 1", "Item 2", "Item 2"];
previousValue = "";
$('#ac').autocomplete({
autoFocus: true,
source: validOptions
})
.keyup(function() {
var isValid = false;
for (i in validOptions) {
if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
isValid = true;
}
}
if (!isValid) {
this.value = previousValue
} else {
previousValue = this.value;
}
}).autocomplete("instance")._renderItem = function(ul, item) {
return $("<li style='white-space: pre-wrap'>")
.append(item.label)
.appendTo(ul);
};
工作小提琴:http://jsfiddle.net/ankurgarg36/kwLmLumd/23/
这.autocomplete("instance")._renderItem
功能不与你的js版的工作。所以我需要使用最新版本建议here
它不会工作,因为它显示 本身作为下拉文本。 –