Ajax实时搜索在按下第一个键后添加定时器 - Ajax live search add timer after first key pressed

Ajax live search add timer after first key pressed

我得到了一个ajax实时搜索脚本，它在数据库中搜索名称。我的问题是，我使用keyup();，所以每次按下输入字段内的一个键，php脚本再次被触发。这将导致输出被刷新多次(取决于搜索的单词有多少个字符)。

所以我添加了一个300毫秒的计时器，但这在开始键入时太慢了。我的解决方案是在按下第一个键时立即启动php脚本，并在按下第一个键后添加计时器。通过这种方式，用户可以立即看到正在发生的事情。

我如何用我当前的代码实现这一点?或者有没有比我想的更好的解决办法?

我代码:

<input type="search" name="keyword" class="producten-icon divider" placeholder="Zoeken..." id="s_search">

我的ajax:

<script>
    var typingTimer;
    var doneTypingInterval = 300;
    $("#s_search").on('keyup',function () {
        clearTimeout(typingTimer)
        var key = $(this).val();
        if(key == ""){
          $(".defaultresults").css("display", "inline");
          $(".phpresult").css("display", "none");
        }else{
          typingTimer = setTimeout(doneTyping, doneTypingInterval);
          $(".defaultresults").css("display", "none");
        }
        function doneTyping () {
          $.ajax({
              url:'includes/fetch_results.php',
              type:'GET',
              data:'keyword='+key,
              beforeSend:function () {
                  $("#results").slideUp('fast');
              },
              success:function (data) {
                  $("#results").html(data);
                  $("#results").slideDown('fast');
              }
          });
        }

    });
</script>

最后是我的php文件

<?php
include 'connection.php';
$conn = new Connection;
if($_GET['keyword'] && !empty($_GET['keyword']))
{
  //  Results names
  $results                  = "SELECT `naam` FROM `producten` WHERE `naam` LIKE '".$_GET['keyword']."%'";
  $resultscon               = $conn->query($results);
  $resultscr                = array();
  while ($resultscr[] = $resultscon->fetch_assoc());
  $eend = @array_map('current', $resultscr);
  sort($eend, SORT_STRING | SORT_FLAG_CASE);
  // echo '<pre>';
  // print_r($eend);
  // echo '</pre>';
  echo '<div class="phpresult"><ul class="productenlijst">';
  foreach($eend as $key => $result){
    //De eerste waarde is leeg dus voor de code pas uit als key nummer is niet 0
    if($key != '0'){
      echo '<li>';
      $char = $result[0];
      if($char !== $lastChar){
        if($lastChar !== ''){
          echo '<br>';
        }
        echo '<span style="color:#eb9600;font-size:25px;font-weight:800;">'.strtoupper($char).'</span><br>';
        $lastChar = $char;
      }
      echo $result.'<br></li>';
      $i++;
    }
  }
  echo '</ul></div>';
};
?>

如何设置一个间隔，重置布尔检查，如果你可以发送它

var sendSearch = true;
var isTiming = false;
var timeout = 300;
$("#s_search").on("keyup", function(){
if (!isTiming){
    isTiming = true;
    setInterval(function(){sendSearch = true;}, timeout);
}
if (sendSearch){
    sendSearch = false;     
    // do your ajax post here   
}
});