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

我对jQuery自动完成插件有问题

通过使用术语“item”多次搜索，一开始效果不错：鼠标上方的css类添加得很好，一切都很顺利。通过单击弹出窗口外的按钮关闭弹出窗口，并在每件事情似乎运行较慢时再次键入：

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

下面是一个非常简单的代码：

以及守则：

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

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

var suggestionList=[]；
对于（变量i=0；i<200；i++）{
suggestionList.push({
标签：'项目'+i，
价值：i
});
}
//初始化jQueryUI自动完成
jQuery（“#自动完成”）.autocomplete({
资料来源：suggestionList
});

HTML:

---

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

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

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

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

---

我把这个建议的解决方法发布到了OpenjQueryUI错误上：

我遇到了一个类似的问题，但是它是由于焦点事件autocomplete导致它自己构建的。我能够利用以下方法修复它

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());

        });

    }

});

每次触发搜索事件时，我都会根据此处的bug删除绑定。然后我解除了focus事件的绑定，并重新绑定它，以确保该搜索只绑定一次

希望这有助于在焦点事件中遇到问题的人

jQuery UI-v1.12.1-2019-08-03-仍然没有修复。谢谢你的解决方案

---

我已经找了好几个小时了，效果很好，泰。太棒了！这帮了大忙！希望我能给出更多的投票。对我来说，问题发生在jquery-ui-1.12.1上，而不是jquery-ui-1.10.2上

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());

        });

    }

});

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