每次搜索都会导致 jQuery 自动完成性能下降答案

【问题标题】：jQuery Autocomplete performance going down with each search每次搜索都会导致 jQuery 自动完成性能下降
【发布时间】：2019-08-05 06:42:33
【问题描述】：

我在使用 jQuery 自动完成插件时遇到问题。

通过使用术语“item”搜索多次，起初它工作正常：鼠标悬停时的 css 类被很好地添加，一切都很顺利。通过在弹出窗口外部单击以将其关闭并在每次似乎一切都变慢时再次输入：

我在 Chrome 上进行了测试，它变得非常慢，在 Firefox 上测试它似乎处理得更好，但性能也有所下降。

这是一个非常简单的代码： https://jsfiddle.net/re9psbxy/1/

还有代码：

var suggestionList = [];
for (var i = 0; i < 200; i++) {
  suggestionList.push({
    label: 'item' + i,
    value: i
  });
}

//initialize jQueryUI Autocomplete
jQuery('#autocomplete').autocomplete({
  source: suggestionList
});

HTML：

<input type="text" id="autocomplete"/>

【问题讨论】：

对我来说，问题发生在 jquery-ui-1.12.1 但不是 jquery-ui-1.10.2

标签： javascript jquery jquery-ui-autocomplete

【解决方案1】：

我在我的一个应用上遇到了与自动完成相同的问题。自动完成在第一次打开时会非常快，但几次之后它实际上变得毫无用处。问题似乎是自动完成似乎正在使用的菜单小部件中的内存泄漏。您可以通过将此添加到自动完成的搜索功能来查看问题：

search: function(e,ui){
 console.log($(this).data("ui-autocomplete").menu.bindings.length);
}

每次搜索时，您都会看到绑定的长度不断增加。要解决此问题，只需在每次搜索时清除绑定即可：

search: function(e,ui){
 $(this).data("ui-autocomplete").menu.bindings = $();
}

我将这个建议的解决方法发布到打开的 jquery ui 错误：https://bugs.jqueryui.com/ticket/10050

【讨论】：

我找了好几个小时，效果很好，你。
太棒了！这帮助很大！希望我能给予更多的支持。

【解决方案2】：

search: function(e,ui){
 $(this).data("ui-autocomplete").menu.bindings = $();
}
jQuery UI - v1.12.1 - 2019-08-03 - 仍未修复。谢谢解决

【讨论】：

【解决方案3】：

我遇到了类似的问题，但它是自动完成的焦点事件导致它建立在自身之上。我能够使用以下方法修复它

self.search_element.autocomplete({
    minLength:0,   
    source: function(request, response) {
        response(data);
    },
    delay: 100, //for some reason some values were not being inserted correctly, so i placed this delay here
    autoFocus: true,
    select: function(event, ui) {
        self.emit('select', ui);

    },
    search: function(e,ui) {
        $(this).data("ui-autocomplete").menu.bindings = $();
        $( this ).off("focus");

        self.search_element.on("focus", function() {
            $(this).data("uiAutocomplete").search($(this).val());

        });

    }

});

每次触发搜索事件时，我都会根据此处的错误 https://bugs.jqueryui.com/ticket/15095 删除绑定。然后我取消绑定焦点事件，并重新绑定它以确保它只为该搜索绑定一次。

希望这对在焦点事件有问题的人有所帮助。

【讨论】：