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