jQuery Autocomplete - AJAX Data

jQuery Autocomplete - AJAX Data

Hello,

I have this code from an open source application that returns data from an AJAX request into an autocomplete field.

This is the code:
  1. // set autocomplete to customer type fields
                    $('#SearchInsert').find('.CustomerCompanySearch').each(function() {
                        var InputID = $(this).attr('id') + 'Autocomplete';
                        $(this).removeClass('CustomerCompanySearch');
                        $(this).attr('id', InputID);
                        $(this).prev().attr('id', InputID + 'Selected');

                        // escape possible colons (:) in element id because jQuery can not handle it in id attribute selectors
                        ITSM.Agent.CustomerSearch.Init( $('#' + Core.App.EscapeSelector(InputID) ) );

                        // prevent dialog closure when select a customer from the list
                        $('ul.ui-autocomplete').on('click', function(Event) {
                            Event.stopPropagation();
                            return false;
                        });
                    });
The first time I use the application, this works as it should, it appends the class "Autocomplete" to the field and data is returned into the field.

But when I submit the search and try a second seach the class "Autocomplete" is not appended anymore and the autocomplete does not work at all, note the search happens without a page reload.

If I reload the page with a F5, then the field will work again one time.

I hope I could make this somewhat clear.

How can I make the autocomplete always work without having to reload the page?

Thank you in advance.