Question

我正在研究搜索系统，这是我的HTML代码

<input type="text" class="SearchChats" placeholder="Search">        
<div class="resc">

</div>

这是我的jquery / AJAX代码

$(".SearchChats").keyup(function(e) {
    var val=$(this).val();
  if (e.which >= 47 && e.which <= 90 || e.which==8){
    if (val!="") {
        $(".resc").empty();
        $(".resc").show();
        $.ajax({
            url: '../files/connect.php',
            type: 'GET',
            cache: false,
            contentType: false,
            processData: false,
            data:"SCTS="+val,
            success: function(ret)
            {
                $(".resc").append(ret);
            }
        });
        $(".overviewrap").hide();
    }else{
        $(".resc").hide();
        $(".overviewrap").show();
    }
}
});

和我的connect.php

if (isset($_GET['SCTS'])) {
    $Value=$_GET['SCTS'];
    $Value=strtolower($_GET['SCTS']);
    $querya=$con->query("SELECT * FROM followers WHERE Follower='$NameId'");
    $followings=[];
    $count=0;
    while ($Folrow=$querya->fetch_row()) {
        $query=$con->query("SELECT Username FROM users WHERE Id='$Folrow[2]'");
        $Namerow=$query->fetch_row();
        $NameChat=$Namerow[0];
        if (strpos($NameChat, $Value) !== false) {
        $ProfilePicQuery=$con->query("SELECT Profile_pic FROM user_opt WHERE Username='$Folrow[2]'");
        $ProfilePicRow=$ProfilePicQuery->fetch_row();
           ?>
            <div class="overview">
                    <img src='../users/<?php echo $ProfilePicRow[0] ?>' class="overviewimg" />
                    <span class="overviewspan"><?php echo $NameChat;?></span>
            </div>
            <?php
            $count++;
        }
    }

问题是当用户输入时它会给所有以m开头的用户，但是当用户真正快速地键入Murad时，它会返回名称为Murad的用户，但会重复5次（因为它已经有了5个字符）

Answer 1

每次用户输入你都会使用ajax调用，所以这可能是一个不好的做法，我认为这里最好的办法就是在setTimeout函数中找到这个调用，然后等待用户停止输入，并让更好的性能，杀死过去的调用，将ajax调用添加到变量中，并在另一个调用启动时终止它，并使用sync ajax调用

Answer 2

使用

插入文本，而不是追加

而不是

$(".resc").append(ret);

使用

$('.resc').innerHTML = 'Your text.';

此外，您可以使用和

输入3个字符后限制通话

而不是

if (val!="") {// call ajax}

使用

if(val.length > 2){// call ajax}

Answer 3

这是因为您在输入每个字母后附加。因此，对于每个字母组合，名称匹配，即：“M”，“Mu”，“Mur”，Murad将附加到您的选项中。尝试在keyup上使用字段的整个值，而不仅仅是触发事件的那个字母。

Answer 4

首先，您应该添加超时以减少ajax请求的数量。其次，您可以在用户仍在键入时中止任何ajax请求，第三，您应该在按下一定数量的字符后开始搜索。

尝试以下方法：

var searchChatsTimeout = false;
var ajaxQuery = false;
$(".SearchChats").keyup(function(e) {

  clearTimeout(searchChatsTimeout);
  if (ajaxQuery !== false) {
    ajaxQuery.abort();
  }
  var val = $(this).val();

  if (val === '') {

      $(".resc").hide();
      $(".overviewrap").show();

      return;
  }

  searchChatsTimeout = setTimeout(function(){

            ajaxQuery = $.ajax({
                url: '../files/connect.php',
                type: 'GET',
                cache: false,
                contentType: false,
                processData: false,
                data:"SCTS="+val,
                success: function(ret)
                {
                     // Empty and Show .resc only if the query is successful
                     $(".resc").empty();
                     $(".resc").show();

                     $(".resc").append(ret);

                     // hide overviewrap if query is successful
                     $(".overviewrap").hide();
                }
            });


  }, 400);

});

用户输入过快时发出JQUERY

4 个答案: