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

【问题标题】：Jquery autocomplete not showing 2 or multiple spaces in drop down suggestedJquery 自动完成未在下拉列表中显示 2 个或多个空格
【发布时间】：2017-10-04 21:02:03
【问题描述】：

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

有没有办法在下拉项目中显示值。

【问题讨论】：

它不会工作，因为它显示本身作为下拉列表中的文本。

标签： javascript jquery drop-down-menu autocomplete jquery-ui-autocomplete

【解决方案1】：

您需要在 HTML 渲染期间为 li 元素 white-space: pre-wrap 应用小 css。

这里是完整的sn-p

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

【讨论】：