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!

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!

• javascript
• jquery
• autocomplete

• Whate does your [ search ](docs.jquery.com/UI/Autocomplete#event-search) event look like? As I understand it, the autocomplete should fire in your second scenario. – Peter Ajtai Commented Oct 18, 2010 at 1:44
• Note how you can enter jav delete it, then enter it again, and it'll still work with this demo ==> jsfiddle.net/KFrQm . – Peter Ajtai Commented Oct 18, 2010 at 1:55
• Hi Peter - I don't have a search event. It isn't necessary to kick off the search. You are right about the example. I realised this before - the only difference is that my source is an ajax request. – peetj Commented Oct 18, 2010 at 7:59
• The jQuery Autocomplete example here: jqueryui.com/demos/autocomplete operates inconsistently. Put in a 'd' and it will find the result 'ColdFusion'. If you backspace delete the 'd', click away then click inside the textbox again and type 'd', sometimes it finds nothing. – peetj Commented Nov 12, 2010 at 1:46
• Hi Peet, Is there a version of jquery-ui-autocomplete that has this fix? Would you point me to it ? If not, please send the snippet of code I have to add to 1.8.9 jquery-ui that fixes this issue as I am also running into this problem. thanks – user613947 Commented Feb 13, 2011 at 0:22

5 Answers 5

Instead changing the jquery.ui, you can try erasing the value of the property "previous", doing something like this:
$(this).data().autocomplete.previous = null;

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 });
    //}
},
...

i've managed to solve this problem by comment out this if-statement in the source of the jquery ui autocomplete.

// keypress is triggered before the input value is changed
clearTimeout( self.searching );
self.searching = setTimeout(function() {
    // only search if the value has changed
    //if ( self.term != self.element.val() ) {
        self.selectedItem = null;
        self.search( null, event );
    //}
}, self.options.delay );

Since JQuery UI 1.8+ you can use the widget factory to extend the default behavior of all your autocomplete widgets. Simply include a javascript file with this content after jqueryUI

// Extend jquery UI autocomplete
$.widget( "ui.autocomplete", $.ui.autocomplete, {
    _close: function( event ) {
        // Calls the original function
        var ret = this._super();

        // Resets previously used search term
        this.term = null;
        
        return ret;
    }
});

Great tips here - this is something I've been struggling with for a while.

For me, the only solution that consistently works is a combination of Duncan's and Stefaan's answers above.