使用 jQuery 实现高效的 AutoSuggest？

我正在努力构建一个 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()？

尝试使用Ben Alman Throttle 和 Debounce 插件 http://benalman.com/projects/jquery-throttle-debounce-plugin/

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

有关如何使用它的示例，请查看他的使用假装自动完成进行去抖动的示例 http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/

你的代码基本上会变成

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 内容要容易得多。