Question

我正在使用jQuery Autocomplete，我有点坚持这个特定的问题。我的自动完成源列表不是简单的arraylist，它存储数据库字段。我已经复制了JSFiddle中的功能。

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

商品ID
一个简单的标签，其中包含变音字符 - 例如：'DõctõrSmíth'（显示为自动完成菜单项）。
alternateText 例如：'史密斯博士'（转换后的字符串，其中变音符被替换为非变音符号等效字符串）

其中一个要求是突出显示每个匹配的字符，我是通过覆盖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>$1</b>');
    return $("<li></li>").data("item.autocomplete", item).append("<a>" + text + "</a>").appendTo(ul);
};

如果我没有alternateText字段并且只有标签与用户输入匹配，那么这很有效。但我希望能够将用户输入与 alternateText 匹配，并突出显示相应的标签字符。所以我进一步将_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.$1.length)));        
    }
    var reg = new RegExp('(' + originalLabel.join('|') + ')', 'gi');
    var text = item.label.replace(reg, '<b>$1</b>');
    return $( "<li></li>" ).data( "item.autocomplete", item ).append( "<a>" + text + "</a>" ).appendTo( ul );
};

从 alternateText 获取匹配项，并使用其索引突出显示标签字段中的文字。

直到我按空格键才能工作。脚本变得反应迟钝，我无法弄清楚是什么导致它以这种方式行事。请帮忙，因为我已经耗尽了所有资源，但我仍然无法找出这种行为的原因。

提前致谢。

其他参考文献：https://github.com/JamieAppleseed/selectToAutocomplete

Answer 1

while loop中的$.ui.autocomplete.prototype._renderItem进入无限循环。我现在正在研究它的原因。

编辑：我认为我发现了问题。

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

检查更新的小提琴：http://jsfiddle.net/e14kne1s/36/

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

1 个答案: