Search code examples
javascriptjqueryautocomplete

jQuery UI Autocomplete not triggering a search when entering a hitherto searched for term


I have a jQuery UI Autocomplete control that fires an Ajax request when minLength = 3. The problem is as follows: Say I enter "fic" as the initial search term - this is fine. The request fires and results are returned. I decide that I don't want to select any of the results and then re-enter the same search again (fic). This time no Ajax request fires!

My code is shown below:

// ... do request
$("#reportSearch").autocomplete({
    delay: 50,
    minLength: 3,
    source: function(q, add){
        $.ajaxSetup ({ cache: false});              
        $.ajax({
            type: "GET",
            url: K_URL_REQUEST


So basically the "source" callback is not fired in the second scenario I described above. It appeared that the reason for this was that the autocomplete control was holding onto the previous search term and because it matched - was not triggering a search:

// Taken from jquery-ui-1.8.4.custom.min.js
if (a.term != a.element.val()) { // *** THE MATCH IS HERE
    //console.log("a.term != a.element.val(): "+a.term+", "+a.element.val());
    a.selectedItem = null;
    a.search(null, c) // *** SEARCH IS TRIGGERED HERE
}


In order to get it to fire each time, I simply reset the search term to null after a search returned. This way it worked as expected.

The thing is I don't understand this behaviour. I would've thought each search should be distinct. There is no caching (or shouldn't be anyway).

So although I've fixed my problem I keep feeling that I have missed something here.

Any ideas anyone? Thanks in advance!


Solution

  • I have found a solution to this problem (for info, I am using jQuery UI 1.8.4)

    The Autocomplete implementation in the jquery-ui-1.8.4.custom.js has a method defined as _change. By commenting out the if statement, the control always sends the request.

    ...,
    _change: function(event) {
        //if (this.previous !== this.element.val()) {
            this._trigger("change", event, { item: this.selectedItem });
        //}
    },
    ...