Question

我遇到了jQuery Autocomplete插件的问题。

通过使用术语“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"/>

Answer 1

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

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

每次搜索时，您都会看到绑定的长度继续增长。要解决此问题，请在每次搜索时清除绑定：

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

我将这个建议的工作发布到open jquery ui bug：https://bugs.jqueryui.com/ticket/10050

Answer 2

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

Answer 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删除绑定。然后，我取消绑定焦点事件，并重新绑定它以确保该搜索仅绑定一次。

希望这对焦点事件有帮助的人。

jQuery自动完成性能随着每次搜索而下降

3 个答案: