JQuery Autocomplete Performance Going Down With Each Search

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 everythin

Solution 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

Solution 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

Solution 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.