在 JQuery 自动完成中,单词之间存在多个空格差异的相似项目在下拉列表中显示为重复项目,因为 Jquery 插件本身正在 trim 下拉项目。
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 元素应用微小的 css white-space: pre-wrap
。
这是完整的代码片段
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);
};
工作 fiddle :http://jsfiddle.net/ankurgarg36/kwLmLumd/23/
此 .autocomplete("instance")._renderItem
函数不适用于您的 js 版本。所以我需要使用建议的最新版本 here
关于javascript - Jquery 自动完成功能未在建议的下拉列表中显示 2 个或多个空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46563371/