Slow multiple jQuery autocomplete fields

I’m a fan of the jQuery autocomplete control. I had a page that worked great with one autocomplete control, but after I added a second, that second control was horribly slow (the first was unchanged). Both controls were defined similar to the one here:

$("#Coaster").autocomplete({
    source: function (request, response) {
        if (request.term.length < 4) {
            return;
        }
        var coaster = new Array();
        $.ajax({
            async: false,
            cache: false,
            type: "POST",
            url: uri + "MyControll/Autocomplete",
            data: { "term": request.term },
            success: function (data) {
                for (var i = 0; i < data.length ; i++) {
                    customer[i] = data[i];
                }
            }
        });
        response(coaster);
    },
    select: function (event, ui) {
        $("#CoasterID").val(ui.item.Id);
    }
});

In order to get the second control to respond within a reasonable period of time, I added this code to the end of the Ajax method, which resolved the problem:

$("#Coaster").autocomplete({

        $.ajax({
 …
        })._renderItem = function (ul, item) {
            return $("<li></li>")
                .data("item.autocomplete", item)
        };
});
Advertisements
  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: