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个请求到服务器。什么是这样做更有效的方式？理想情况下，我认为应该做一个搜索，而不是即时KEYUP前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对象坐在某处和搜索，与其多次搜索数据库。它不会带来太大的悬伸，只要它不是1000楼的朋友什么的清单。