使用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.添加某种类型的延迟只能在人停止输入300ms左右时才提交.AJAX（）？
尝试使用Ben Alman的Throttle＆Debounce插件
让你“延迟”事情，直到用户完成。
有关如何使用它的示例，请查看他使用假装自动完成function进行去抖动的示例
你的代码基本上会成为
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'); }
您将注意到我删除了您的background-image css并将其替换为addClass / removeClass。 在css文件中管理css更容易。
我会选择C的变体。不要等待用户停止输入，而是在第一次击键后等待一段时间（200ms？）。 之后，在许多情况下，您将收到额外的击键，然后使用键入的字符来获取自动提示。 如果在提交请求后按下另一个键，则会再次开始计数。
你也一定要做一些缓存; 人们将使用退格键，你必须再次显示名单。
我不知道，你使用的是什么数据库，或者你使用的是硬编码文件！？
无论如何，一个好的起点是等待至少一个TOT NUMS的字符
es。：在3之后（在大多数情况下，这是搜索mysql的最小单词长度）字符然后你可以开始搜索你的DB或json文件！
我认为你必须给PHP或其他人一些像FILTERING等等的艰苦工作。在发回响应之前！
顺便说一句，我认为最好的AutoSuggest之一是来自brandspankingnew的那个
自动完成插件有一个超时选项，您可以设置为执行此操作。