jQuery UI 自动完成插件 - 问题答案

【问题标题】：jQuery UI AutoComplete Plugin - QuestionsjQuery UI 自动完成插件 - 问题
【发布时间】：2011-01-27 23:36:59
【问题描述】：

我有一个 ASP.NET MVC 3 Web 应用程序 (Razor)，以及一个带有 jQuery UI AutoComplete 插件 (v1.8) 的特定视图。

这是我目前的设置：

$('#query').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Search/FindLocations",
                type: "POST",
                dataType: "json",
                data: { searchText: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { name: item.id, value: item.name, type: item.type }
                    }))
                },
                error: function (xmlHttpRequest, textStatus, errorThrown) {
                    // don't know what i should do here...
                }
            })
        },
        select: function (event, ui) {
            $.get('/Search/RenderLocation', { id: ui.item.name }, function (data) {
                $('#location-info').html(data);
            });
        },
        delay: 300, minLength: 3
    });

自动完成返回世界上的位置，与谷歌地图自动完成基本相同。

这是我的问题：

1) delay 和 minLength 的推荐设置是什么？保持默认？

2) 我想过将[OutputCache] 放在Controller 操作上，但我看起来好像插件会自动进行缓存？这是如何运作的？它是否将结果存储在 cookie 中？如果有，什么时候到期？是否推荐任何额外的缓存？

3) 我注意到如果我输入了某些内容，并且在触发 AJAX 请求的同时，如果我输入了其他内容，对话框会暂时显示第一个结果，然后显示第二个结果。我可以理解为什么，但这让用户感到困惑（鉴于 AJAX 请求可能需要 1-2 秒），但我正在考虑在 $.ajax 选项中使用 async: false 来防止多个请求 - 这是糟糕的设计/UX ?

4)您能否推荐对我的上述设置进行任何其他更改以提高性能/可用性？

【问题讨论】：

标签： asp.net-mvc ajax jquery jquery-ui-autocomplete

【解决方案1】：

1) 这真的取决于您的使用情况和数据。

2) 你应该使用 [OutputCache]。如果插件上发生任何缓存，它只会针对每个用户，如果您在控制器操作级别使用缓存，它将为所有用户缓存一个。（同样，根据您的使用情况，这实际上可能很糟糕，但通常这样做是好的）

3）由于缺乏上下文，这个问题也有点难。如果 ajax 请求是 1-2 秒并且没有办法缩短这个时间，那么你真的应该有一个相当大的延迟，这样用户在输入长单词时不会发送很多请求（如果他们输入慢的话）。

4) 听起来您需要查看您的 /search/FindLocations 方法，看看您可以在哪里进行缓存或首选项改进。在这里给我们看看您的代码，我可以尝试提出更多建议。

【讨论】：