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"/>

Fig

For me the issue occurs on jquery-ui-1.12.1 but not on jquery-ui-1.10.2 – Himation

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

Freespoken

I was looking for this for hours, works perfect, ty. – Shiprigged

Fantastic! This helped so much! Wish I could give more upvotes. – Foret

Answer 2

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

jQuery UI - v1.12.1 - 2019-08-03 - still not fixed. Thank you for solution

Lugsail

Answer 3

I ran into a similar issue, however it was with the focus event of autocomplete causing it to build upon itself. I was able to fix it utilizing the following

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

        });

    }

});

Each time the search event is fired, I erase the bindings according to the bug here, https://bugs.jqueryui.com/ticket/15095. Then I unbind the focus event, and rebind it to ensure it's only binded once for that search.

Hope this helps someone when having issues with the focus event.

Jungian