Facebook 风格的 AJAX 搜索

Question

我已经为我的网站创建了一个 Facebook 风格的 ajax 搜索，当您键入它时，它会在搜索下方的一个漂亮列表中显示结果。

$("#s").keyup(function() {
    var searchbox = $(this).val();
    var dataString = 's='+ searchbox;
    if(searchbox!='') {
        $.ajax({
            type: "POST",
            url: "/livesearch.php",
            data: dataString,
            cache: false,
            success: function(html){
                $("#display").html(html).show();
            }
        });
    } else {return false; }  
});

$("body").click(function() {
        $("#display").hide();
});

这样做的问题是它有点无效，因为用户会输入一个单词，例如“足球”。这将向服务器执行 8 个请求。什么是更有效的方法来做到这一点？理想情况下，我认为它应该在进行搜索而不是即时键入之前将请求存储 1 秒。但不是 100% 确定如何做到这一点...

Answer 1

您所指的方法称为“去抖动”

我通常在所有脚本的底部都有一个“去抖动”功能

var debounce=function(func, threshold, execAsap) {
    var timeout;
    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };
        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);
        timeout = setTimeout(delayed, threshold || 100); 
    }; 
};

然后每当我做任何可以从去抖中受益的事情时，我都可以通用地使用它

所以你的代码将被重写为

$("#s").keyup(debounce(function() {
    var searchbox = $(this).val();
    var dataString = 's='+ searchbox;
    if(searchbox!='') {
        $.ajax({
                type: "POST",
                url: "/livesearch.php",
                data: dataString,
                cache: false,
                success: function(html){
                        $("#display").html(html).show();
                }
        });
    } else {return false; }  
}
,350 /*determines the delay in ms*/
,false /*should it execute on first keyup event, 
       or delay the first event until 
       the value in ms specified above*/
));

Answer 2

另一种选择是在 2/3 个字符后开始搜索。在发出每个请求之前等待 1 秒对我来说并不好。还可以尝试向服务器发送更少的数据，这也可能使请求和响应更快。

Answer 3

您可以在某处放置一个 JSON 对象并对其进行搜索，而不是多次搜索数据库。它不会带来太多悬念，只要它不是 1,000 个朋友的列表或其他东西。