Jquery自动完成未在下拉列表中显示2个或多个空格 [英] Jquery autocomplete not showing 2 or multiple spaces in drop down suggested
问题描述
在JQuery自动完成中,由于Jquery插件本身正在修剪下拉项目,因此在单词之间具有多个空格差异的类似项目将显示为重复项目。
演示:
此。 autocomplete(instance)._ renderItem
函数不适用于您的js版本。所以我需要使用最新版本这里
In JQuery autocomplete , similar items with difference of multiple spaces in between words are shown as duplicates item in drop-down as Jquery plugin itself is trimming the drop-down items.
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;
}
});
Is there any way to show the value as such in drop-down items.
you need to apply the tiny css for li element white-space: pre-wrap
during HTML rendering .
Here is the complete snippet
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);
};
Working fiddle : http://jsfiddle.net/ankurgarg36/kwLmLumd/23/
This .autocomplete("instance")._renderItem
function is not working with the your js version. So I need to use latest version suggested here
这篇关于Jquery自动完成未在下拉列表中显示2个或多个空格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!