2011-11-06 121 views
1

当我正在现场搜索框,似乎如果我正常和快速型,它不会清除div中的HTML结果打字速度太快了。相反,它将每个按键的结果放在div中。jQuery的自动填充

$('.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;

回答

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); 
}); 

这将只显示最终值。

编辑:快速测试提醒我说,使用​​是错误的,你的情况,你会永远想念由用户输入的最后一个字符。改为使用keyup

Live test case

+0

这里'if(showResultsTimer)'部分是(IMO)冗余,无效定时器的'clearTimeout()'是安全的。此外,这并不能解决以前的请求返回无序的问题:) –

+0

好的一点,仍然不希望在没有任何可清除的情况下运行'clearTimeout' - 只是个人习惯。 :-) –

4

这里的问题是你胡乱设置超时值的keydown搜索后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(" ")清除它。