Facebook风格AJAX搜索

我已经为我的网站创建了一个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(); }); 

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

Answer 1

你所指的方法叫做“Debouncing”

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

 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个朋友或其他东西的清单。