Question

I’m using jQuery UI autocomplete with data from a remote datasource. My use case is really similar to the example here:

http://jqueryui.com/demos/autocomplete/#remote

The only difference is that I set my delay to 0. In between the keystrokes, the menu disappears for about 1/10th of a second ~100milli seconds prior to the updated autocomplete list being displayed.

Is there anyway I can prevent the menu from temporarily disappearing between keystrokes? A good use case is google’s search, where between keystrokes, the suggestion box does not temporarily disappear.

Answer 1

IMO, it is not a good practice to set a delay of zero when using a remote datasource. It will send more requests than needed and surcharge the server with no benefit.

Anyway, I think you can achieve what you want by defining the source option as a callback yourself.

First a bit of explanaton. I suppose you are using the remote feature passing an url as the source for the plugin. The plugin actually wraps this into a callback implemented this way:

// in case the option "source" is a string
url = this.options.source;
this.source = function(request, response) {
    if (self.xhr) {
        self.xhr.abort();
    }
    self.xhr = $.ajax({
        url: url,
        data: request,
        dataType: "json",
        autocompleteRequest: ++requestIndex,
        success: function(data, status) {
            if (this.autocompleteRequest === requestIndex) {
                response(data);
            }
        },
        error: function() {
            if (this.autocompleteRequest === requestIndex) {
                response([]);
            }
        }
    });
};

As you can see, if there is already an ajax request going on, it abords it. This happenning in your case as a request, as fast as your server can be, takes some time and your delay is zero.

if (self.xhr) {
    self.xhr.abort();
}

This will actually execute the error callback of the aborted request that will execute itself the response callback with an empty dataset. If you look at the response callback, it closes the menu if data is empty:

_response: function(content) {
    if (!this.options.disabled && content && content.length) {
        ...
    } else {
        this.close();
    }

You can actually define your own source callback to make your ajax request yourself and change the default behavior by not aborting any pending request. Something like:

$('#autocomplete').autocomplete({
    source: function(request, response) {
        $.ajax({
            url: url,
            data: request,
            dataType: "json",
            success: function(data, status) {
                // display menu with received dataset
                response(data);
            },
            error: function() {
                // close the menu on error by executing the response
                // callback with an empty dataset
                response([]);
            }
        });
    }
});