小编典典

如何在执行搜索之前让实时jQuery搜索等待一秒钟?

ajax

我有一个搜索输入,当我输入内容时,该输入会将数据从输入发送到php文件。php文件对我的数据库进行搜索,并显示搜索选项列表。您知道,ajax风格的实时搜索。

我的问题是,如果您输入的内容非常快,即使输入了另外10个字母,它也可能只搜索前1或2个字母。这引起一些问题。

我的jQuery看起来像这样:

$(document).ready(function(){
  $('#searchMe').keyup(function(){
    lookup(this.value);
  });
});

function lookup(searchinput) {

  if(searchinput.length == 0) {
    // Hide the suggestion box.
    $("#suggestions").hide();
  } else {

    $('#loading').fadeIn();

    $.post("/RPCsearch.php", {queryString: ""+searchinput+""}, function(data){
      if(data.length > 0) {
        $("#suggestions").html(data).show();
        $('#loading').fadeOut();
      }
    });
  }
} // lookup

所以我很好奇,如何使脚本等到我完成输入后再运行该函数?我的逻辑是说,例如,如果200秒钟内没有按下任何键,请运行该功能,否则请稍等一下。

怎么做?


阅读 229

收藏
2020-07-26

共1个答案

小编典典

容易,使用setTimeout。当然,您只希望一次运行一个计时器,因此clearTimeout在函数开始时使用它很重要…

$(function() {
  var timer;
  $("#searchMe").keyup(function() {
    clearTimeout(timer);
    var ms = 200; // milliseconds
    var val = this.value;
    timer = setTimeout(function() {
      lookup(val);
    }, ms);
  });
});
2020-07-26