Question

I’m using the Jquery UI autocomplete on an existing project. Well, the performance is dog slow, especially when executing the

input.autocomplete("search", "");

My solution was to cache the information, so even though its dog slow it only occurs once. I think I’m missing a very simple Javascript bug and I would really appreciate some help chasing it down.

Here is the code

input.autocomplete(
        {
            delay: 0,
            minLength: 0,
            source: function (request, response)
            {
                if (request.term in cache)
                {
                    response(cache[request.term]);
                    return;
                }
                // The source of the auto-complete is a function that returns all the select element's child option elements.
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                response(select.children("option").map(function ()
                {
                    var text = $(this).text();
                    if (this.value && (!request.term || matcher.test(text)))
                    {
                        cache[request.term] = text;
                        return { label: text, value: text, option: this };
                    }
                }));
            },

            select: function (event, ui)
            {
                // On the select event, trigger the "selected" event with the selected option. Also update the select element
                // so it's selected option is the same.
                ui.item.option.selected = true;
                self._trigger("selected", event,
                {
                    item: ui.item.option
                });
            },

            change: function (event, ui)
            {
                // On the change event, reset to the last selection since it didn't match anything.
                if (!ui.item)
                {
                    $(this).val(select.children("option[selected]").text());
                    return false;
                }
            }
        });

        // Add a combo-box button on the right side of the input box. It is the same height as the adjacent input element.
        var autocompleteButton = $("<button type='button' />");
        autocompleteButton.attr("tabIndex", -1)
                          .attr("title", "Show All Items")
                          .addClass("ComboboxButton")
                          .insertAfter(input)
                          .height(input.outerHeight())
                          .append($("<span />"))
        autocompleteButton.click(function ()
        {
            // If the menu is already open, close it.
            if (input.autocomplete("widget").is(":visible"))
            {
                input.autocomplete("close");
                return;
            }

            // Pass an empty string as value to search for -- this will display all results.
            input.autocomplete("search", "");
            input.focus();
        });

Almost all of it is default jquery UI combobox example code with the exception of my feeble caching attempt. It is returning each character in the dropdown.

For example if a returned solution set is rabble, and the next was foobar the “Cached data” will look like this
f
o
o
b
a
r
each on its own line

I need it to be
rabble
foobar

It would be really nice if this also worked for an empty string as thats my most taxing call.

Thanks for your help

Answer 1

It would be much easier if you cache the webservice results by setting appropriate HTTP Headers. That way the browser will take care of all the nasty cache invalidation issues for you.

In C# you can set an Expires header one year into the future like so:

Response.Cache.SetExpires(DateTime.Now.AddYears(1));

The best reference for HTTP caching is Mark Nottingham’s Caching Tutorial for Web Authors and Webmasters. Anything that I haven’t answer here lies in that document.

A more C# specific resource is dotnetperls.com’s ASP.Net Cache Examples and Overview.