Jquery自动完成不在下拉列表中显示2个或多个空格

Question

在JQuery自动填充中，由于jquery插件本身正在修剪下拉项目，因此在单词之间具有多个空格的差异的类似项目在下拉列表中显示为重复项目。

演示：Working demo of issue

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; 
    } 
}); 

有什么办法，以显示在下拉项目的价值本身。

Answer 1

您需要在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