javascript - jQuery Autocomplete performance going down with each search

Question

I am having an issue with jQuery Autocomplete plugin.

By searching mutltiple times with term "item", at first it works okay: css classes on mouseover are added nicely and everything is smooth. By clicking outside of the popup to close it and typing again each time everything seems to work slower:

I tested it on Chrome which gets very slow and on Firefox which seem to handle it a bit better but also has a performance degradation.

Here is a fiddle with very simple code: https://jsfiddle.net/re9psbxy/1/

And the code:

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

I ran into the same issue with autocomplete on one of my apps. The autocomplete would be very fast the first time it opened, but after a few times it became practically useless. The problem appears to be a memory leak in the menu widget that the autocomplete seems to be using. You can see the issue by adding this to search function of the autocomplete:

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

Each time you search, you'll see the length of the bindings continue to grow. To fix this, just clear the bindings each time you search:

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

I posted this suggested work around to the open jquery ui bug: https://bugs.jqueryui.com/ticket/10050