5

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

4

4 回答 4

9

尝试使用Ben Alman 的 Throttle & 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 内容要容易得多。

于 2010-03-14T19:10:55.993 回答
2

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

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

于 2010-03-14T19:13:01.663 回答
2

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

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

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

我认为你必须给 PHP 或其他人做一些艰苦的工作，比如过滤等，然后再发回回复！

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

于 2010-03-14T19:56:25.417 回答
1

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

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

于 2010-03-14T19:38:35.663 回答