使用 jQuery 的高效 AutoSuggest？答案

【问题标题】：Efficient AutoSuggest with jQuery?使用 jQuery 的高效 AutoSuggest？
【发布时间】：2011-01-27 10:52:34
【问题描述】：

我正在努力构建一个 jQuery AutoSuggest 插件，灵感来自 Apple 的聚光灯。

这里是通用代码：

$(document).ready(function() { 
$('#q').bind('keyup', function() {

    if( $(this).val().length == 0) {
        // Hide the q-suggestions box
        $('#q-suggestions').fadeOut();
    } else {
        // Show the AJAX Spinner
        $("#q").css("background-image","url(/images/ajax-loader.gif)");

        $.ajax({
            url: '/search/spotlight/',
            data: {"q": $(this).val()},
            success: function(data) {
                $('#q-suggestions').fadeIn(); // Show the q-suggestions box
                $('#q-suggestions').html(data); // Fill the q-suggestions box

                // Hide the AJAX Spinner
                $("#q").css("background-image","url(/images/icon-search.gif)");

            }
        });
    }
});

我想优雅地解决的问题不是杀死服务器。现在，上面的代码在您每次键入键时都会访问服务器，并且不会等待您基本上完成键入。解决这个问题的最佳方法是什么？ A. 终止以前的 AJAX 请求？ B. 某种类型的 AJAX 缓存？ C. 添加某种延迟以仅在用户停止输入 300 毫秒左右时才提交 .AJAX()？

【问题讨论】：

你看过 jQuery UI jqueryui.com/demos/autocomplete 的新自动完成插件了吗？
@nobosh：我在不杀死服务器的情况下实现了高效的自动提示，如果你能想出一些你认为它高效的东西，你会分享示例服务器端代码吗？ - 谢谢。

标签： javascript jquery ajax time autosuggest

【解决方案1】：

尝试使用Ben Alman's Throttle & Debounce plugin

让您“延迟”事情直到用户完成。

有关如何使用它的示例，请查看他的 example of debouncing with a pretend autocomplete

你的代码基本上会变成

var qinput = $('#q').bind('keyup', $.debounce( 250, function() {

    if( $(this).val().length == 0) {
        // Hide the q-suggestions box
        $('#q-suggestions').fadeOut();
    } else {
        // Show the AJAX Spinner
        qinput.addClass('loading');

        $.ajax({
            url: '/search/spotlight/',
            data: {"q": $(this).val()},
            success: function(data) {
                $('#q-suggestions')
                    .fadeIn() // Show the q-suggestions box
                    .html(data); // Fill the q-suggestions box

                // Hide the AJAX Spinner
               qinput.removeClass('loading').addClass('search');
            }
        });
    }
}));

CSS

.loading{
    background: url('/images/ajax-loader.gif');
}
.search{
    background: url('/images/icon-search.gif');
}

您会注意到我删除了您的背景图像 css 并用 addClass/removeClass 替换了它们。更容易管理 css 文件中的 css 内容。

【讨论】：

听起来很有趣，但你不觉得有很多代码吗？
不会调用 0.7kb 很多代码 github.com/cowboy/jquery-throttle-debounce/raw/v1.1/…
是的。您如何建议在上面的代码中实现 Throttle？我没有看到如何在这方面使用插件。谢谢
更新了答案，其中包含指向他使用 debounce 的假装自动完成小部件示例的链接以及使用 debounce 的代码示例。

【解决方案2】：

我会选择 C 的变体。不要等待用户停止输入，而是在第一次击键后等待一段时间（200 毫秒？）。然后在那之后，在许多情况下，您会收到额外的击键，然后您使用键入的字符来获得自动建议。如果在提交请求后按下另一个键，您将重新开始计数。

你当然也应该做一些缓存；人们将使用退格键，您将不得不再次显示名单。

【讨论】：

谢谢，你能提供一些关于如何实现延迟和缓存的提示吗？
你可能想看看这里的jQuery插件：code.google.com/p/jquery-autocomplete它支持延迟和缓存长度等参数

【解决方案3】：

我不知道，您使用的是什么数据库或者您使用的是硬编码文件！？

无论如何，一个好的起点是等待至少 TOT NUMS 个字符用于

es.：在 3 之后（在大多数情况下，这是搜索 mysql 的最小单词长度）字符那么你就可以开始搜索你的DB或者json文件了！

我认为您必须为 PHP 或其他人提供 FILTERING 等艰苦的工作，等等。在发回回复之前！

顺便说一句，我认为最好的 AutoSuggest 之一是来自 brandspankingnew 的那个

【讨论】：

【解决方案4】：

自动完成插件有一个超时选项，您可以设置它来执行此操作。

http://docs.jquery.com/Plugins/AutoComplete/autocomplete

【讨论】：