Question

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

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

如何使用当前代码实现此目的？或者是否有比我想到的更好的解决方案？

我的代码：

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

我的阿贾克斯：

<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>';
};
?>

Answer 1

如何设置间隔并重置布尔检查是否可以发送

{ [...]: ... }

按下第一个键后，Ajax实时搜索添加计时器

1 个答案: