无响应的脚本（JS-jQuery 自动完成）

Question

我正在使用 jQuery 自动完成，但我有点卡在这个特定问题上。我的自动完成源列表不是一个简单的数组列表，它存储数据库字段。我已经复制了这个 JSFiddle.

中的功能

详细说明，在自动完成源中，我有 3 个字段：

项目 ID
一个简单的 label，其中包含变音符号 - 例如：'Dõctõr Smíth'（显示为自动完成菜单项）。
alternateText 例如：'Doctor Smith'（变音符号被替换为非变音符号的等价字符的转换字符串）

其中一个要求是突出显示每个匹配的字符，我通过覆盖 jQueryUI.

中定义的 _renderItem 函数来做到这一点

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
    var splitTerm = this.term.split(' ').join('|');
    var re = new RegExp("(" + splitTerm + ")", "gi");        
    var text = item.label.replace(re, '<b></b>');
    return $("<li></li>").data("item.autocomplete", item).append("<a>" + text + "</a>").appendTo(ul);
};

如果我没有 alternateText 字段并且只有 label 与用户输入相匹配，这会很好用。但我希望能够将用户输入与 alternateText 匹配并突出显示相应的 label 字符。所以我进一步将 _renderItem 函数扩展为：

$.ui.autocomplete.prototype._renderItem = function( ul, item){  
    var splitTerm = this.term.split(' ').join('|');
    var re = new RegExp("(" + splitTerm + ")", "gi") ;      
    var arr,originalLabel= [];
    while ((arr = re.exec(item.alternateText)) != null) {
        originalLabel.push(item.label.substr(arr.index, (RegExp..length)));        
    }
    var reg = new RegExp('(' + originalLabel.join('|') + ')', 'gi');
    var text = item.label.replace(reg, '<b></b>');
    return $( "<li></li>" ).data( "item.autocomplete", item ).append( "<a>" + text + "</a>" ).appendTo( ul );
};

它从 alternateText 中获取匹配项，并使用它们的索引来突出显示 label 字段中的文本。

这一直有效，直到我达到 space 栏。脚本变得没有响应，我无法弄清楚是什么导致它以这种方式运行。请帮忙，因为我已经用尽了所有资源，但我仍然无法找出此行为的原因。

提前致谢。

其他参考资料：https://github.com/JamieAppleseed/selectToAutocomplete

Answer 1

你的 while loop 在你的 $.ui.autocomplete.prototype._renderItem 进入无限循环。我现在正在调查它的原因。

编辑：我想我发现了问题。

space 作为空字符串添加到 regex 的末尾，这导致 while 始终为真。

检查更新 fiddle：http://jsfiddle.net/e14kne1s/36/

无响应的脚本（JS-jQuery 自动完成）

Unresponsive Script (JS-jQuery Autocomplete)

jquery

text

autocomplete

highlight

diacritics