缓存Jquery UI自动完成组合框

时间:2010-09-02 22:42:34

标签: javascript jquery jquery-ui caching autocomplete

我在现有项目中使用Jquery UI自动完成功能。嗯,性能是狗慢,特别是在执行

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

我的解决方案是缓存信息,所以即使它的狗慢了它只发生一次。我想我错过了一个非常简单的Javascript错误,我真的很感激一些帮助追逐它。

这是代码

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();
        });

除了我的微弱缓存尝试之外,几乎所有这些都是默认的jquery UI组合框示例代码。它返回下拉列表中的每个字符。

例如,如果返回的解决方案集是混乱的,而下一个是foobar,则“缓存数据”将如下所示 F Ø Ø b 一个 [R 每个人都在自己的行上

我需要它 乌合之众 foob​​ar的

如果这也适用于空字符串,那将是非常好的,因为这是我最费力的电话。

感谢您的帮助

2 个答案:

答案 0 :(得分:0)

默认情况下,jQuery AutoComplete缓存。你可能想要做的是做一些分页或缓存服务器端来限制性能压力。您使用的服务器端技术是什么?

答案 1 :(得分:0)

如果通过设置适当的HTTP标头来缓存Web服务结果会更容易。这样浏览器将为您处理所有令人讨厌的缓存失效问题。

在C#中,你可以在未来一年设置一个Expires标题,如下所示:

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

HTTP缓存的最佳参考是Mark Nottingham的Caching Tutorial for Web Authors and Webmasters。我在这里没有回答的任何内容都在于该文件。

更多C#特定资源是dotnetperls.com的ASP.Net Cache Examples and Overview