Jquery Autocomplete remembers the previous selection

Question

The requirement is to display autocomplete addresses based on the region selected. The Jquery autocomplete is called everytime the region changes. I am getting the correct autocomplete addresses based on the region. But along with the new address list, I also get the address list for previously selected regions.
To solve this problem, I used - $("#address).removeData('events').autocomplete(...)

This solves the problem. But a new problem is introduced now! The scrolling in the autocomplete list does not work properly, items are skipped on pressing down arrow key/up arrow key.

Here is the code snippet:

$("#address).removeData('events').autocomplete({
    serviceUrl : 'mysource',
    minChars : 2,
    params : {
        region : selectedRegion
    },
    noCache : true,
    width : 350,
    maxHeight : 170,
    onSelect : function (value) {
        ...
        ...
    }
});

Can somebody suggest me the correct approach? I am using jquey.autocomplete-min.js

Answer 1

Well, the following worked like a charm to me

var ac = $("#address").autocomplete();

The next time, the region is changed, instead of calling autocomplete()
again, I just do this -

   ac.setOptions({ params:{ region : selectedRegion}});

This updates the existing call with new region. I will no more see autocomplete suggestions for the previous selections.

Answer 2

If youre getting an additional appearing alongside jquery's autocomplete list, it may be an issue with your browser trying to autocomplete the input. trying adding the autocomplete="off" attribute to the input field you're autocompleting

Answer 3

As mentioned in this answer the issue might not be with your code snippet but with browser http caching in general.