自动完成时jQuery输入太快答案

【问题标题】：jQuery typing too quickly when autocompleting自动完成时jQuery输入太快
【发布时间】：2011-12-23 00:41:14
【问题描述】：

我正在制作一个实时搜索框，似乎如果我输入正常且快速，它不会清除 div 中的 html 结果。相反，它将每次击键的结果放在 div 中。

$('.searchbox').live('keydown', function(e){
  searchnow = $('.searchbox').val();
  $('#searchresultssmall').html(" ");
  setTimeout(function(){
 $('#searchresultssmall').show();
 fetch(400,"task=search&search="+searchnow);
   },1000);
 });

我的获取代码太大了，但只是其中的一部分

case 400: if(obj.id) { $('#searchresultssmall').append('<div class="smallresult">'+obj.username+'</div>'); } break;

【问题讨论】：

标签： jquery search autocomplete

【解决方案1】：

您需要清除上一个计时器。优化后的代码是：

var showResultsTimer = 0;
$('.searchbox').live('keydown', function(e){
    searchnow = this.value;
    var oResultPanel = $('#searchresultssmall');
    oResultPanel.html(" ");
    if (showResultsTimer)
        window.clearTimeout(showResultsTimer);
    showResultsTimer = window.setTimeout(function(){
        oResultPanel.show();
        fetch(400,"task=search&search="+searchnow);
    },1000);
});

这将只显示最终值。

编辑：快速测试提醒我，在您的情况下使用 keydown 是错误的，因为您总是会错过用户输入的最后一个字符。请改用keyup。

Live test case.

【讨论】：

if (showResultsTimer) 部分在这里是 (IMO) 多余的，无效计时器的 clearTimeout() 是安全的。此外，这并不能解决以前的请求无序返回的问题 :)
好点，当没有什么要清除的时候仍然不喜欢运行clearTimeout - 只是个人习惯。 :-)

【解决方案2】：

这里的问题是你在按键后不加选择地设置了搜索 1 秒的超时，这有几个问题：

用户可能已经反转和更改了输入
服务器请求不保证按顺序返回（某些搜索可能比其他搜索更容易/更快）

你应该做的是存储那个计时器，这样你就可以清除它，而不是使用 clearTimeout() 运行任何以前排队的搜索，如下所示：

var timerId;
$('.searchbox').live('keydown', function(e){
  searchnow = $('.searchbox').val();
  $('#searchresultssmall').html(" ");

  clearTimeout(timerId);
  timerId = setTimeout(function(){
    $('#searchresultssmall').show();
    fetch(400,"task=search&search="+searchnow);
  },1000);
});

此外，您需要将请求存储在您的 fetch() 方法中（如果没有关于此方法的更多详细信息，我无法清楚），因此您可以在上一个请求中调用 .abort()...所以它可以'稍后返回并替换用户实际输入的最新内容的结果。如果该请求已经完成，那没有什么坏处，它不会搞砸随着稍后的结果，它已经运行了，你已经在这个事件处理程序上使用.html(" ") 清除了它。

【讨论】：