Ajax实时搜索单次搜索后失效，需刷新页面求解决（附代码）

问题现象 #

实现的Ajax实时搜索功能完成一次搜索后就无法正常工作，每次搜索都得手动刷新页面才行。

用户原前端代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){

    $("#live_search").keyup(function(){
      var input = $(this).val();
      //alert(input);

      if(input != ""){
        $.ajax({

          url:"livesearch.php",
          method:"POST",
          data:{input:input},

          success:function(data){
           $("#searchresult").html(data);
          }
        });
      }else{
        $("#searchresult").css("display", "none"); 
      }
    });
  });
    
</script>

用户原PHP后端代码 #

<?php
include('our/db_connect.php');

if(isset($_POST['input'])){
$input = $_POST['input'];
$query = "SELECT * FROM parcels WHERE reference_number LIKE '{$input}'";
$result = mysqli_query($conn, $query);

if(mysqli_num_rows($result) > 0){?>

        <table class="table table-bordered table-striped mt-4">
            <thead>
                <tr>
                    <th>tracking num</th>
                    <th>sender contact</th>
                    <th>status</th>
                    <th>From</th>
                    <th>To</th>
                </tr>
            </thead>
            <tbody>
                <?php
                while($row = mysqli_fetch_assoc($result)){
                    $ref = $row['reference_number'];
                    $sender = $row['sender_name'];
                    $from = $row['from_branch_id'];
                    $to = $row['to_branch_id'];

                    ?>
                    <tr>
                        <td><?php echo $ref;?></td>
                        <td><?php echo $sender;?></td>
                        <td><?php echo $from;?></td>
                        <td><?php echo $to;?></td>
                    </tr>

                    <?php
                }
                ?>
            </tbody>
        </table>
    <?php 
    
}else{
    echo "No Parcel Found";
}
}
?>

问题根源 #

1. 显示逻辑遗漏：输入为空时隐藏了结果容器，但后续输入有内容时没有重新显示容器，导致搜索结果无法被看到，误以为功能失效。
2. SQL查询逻辑错误：LIKE语句未加通配符%，只能匹配完全等于输入内容的记录，无法实现模糊搜索，同时存在SQL注入风险。
3. 事件绑定鲁棒性不足：直接绑定keyup事件，若后续输入框是动态生成的，会导致事件失效。

修复方案 #

前端代码修正 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    // 改用事件委托，兼容动态生成的输入框
    $(document).on('keyup', '#live_search', function(){
      var input = $(this).val().trim(); // 去除首尾空格，避免无效请求

      if(input !== ""){
        $.ajax({
          url: "livesearch.php",
          method: "POST",
          data: {input: input},
          success:function(data){
            $("#searchresult").show(); // 确保结果容器可见
            $("#searchresult").html(data);
          },
          error: function(){
            $("#searchresult").show();
            $("#searchresult").html("搜索出错，请稍后重试");
          }
        });
      }else{
        $("#searchresult").hide(); 
      }
    });
  });
</script>

• 新增trim()处理输入，过滤无意义的空格
• 搜索成功时强制显示结果容器，解决隐藏后无法恢复的问题
• 添加错误回调，处理请求失败的情况
• 改用事件委托绑定，增强代码鲁棒性

后端代码修正 #

<?php
include('our/db_connect.php');

if(isset($_POST['input'])){
    // 转义特殊字符，彻底防范SQL注入
    $input = mysqli_real_escape_string($conn, trim($_POST['input']));
    // 添加通配符%，实现包含式模糊搜索
    $query = "SELECT * FROM parcels WHERE reference_number LIKE '%{$input}%'";
    $result = mysqli_query($conn, $query);

    if(mysqli_num_rows($result) > 0){
?>
        <table class="table table-bordered table-striped mt-4">
            <thead>
                <tr>
                    <th>tracking num</th>
                    <th>sender contact</th>
                    <th>status</th>
                    <th>From</th>
                    <th>To</th>
                </tr>
            </thead>
            <tbody>
                <?php
                while($row = mysqli_fetch_assoc($result)){
                    $ref = $row['reference_number'];
                    $sender = $row['sender_name'];
                    $status = $row['status']; // 修正列对应错误
                    $from = $row['from_branch_id'];
                    $to = $row['to_branch_id'];
                ?>
                    <tr>
                        <td><?php echo $ref;?></td>
                        <td><?php echo $sender;?></td>
                        <td><?php echo $status;?></td> <!-- 匹配表头的status列 -->
                        <td><?php echo $from;?></td>
                        <td><?php echo $to;?></td>
                    </tr>
                <?php
                }
                ?>
            </tbody>
        </table>
    <?php 
    }else{
        echo "No Parcel Found";
    }
}
?>

• 使用mysqli_real_escape_string转义输入内容，防范SQL注入
• 给LIKE语句添加前后通配符%，实现模糊搜索（如需前缀/后缀匹配，可调整为'{$input}%'或'%{$input}'）
• 修正表格列与数据的对应错误，确保status列显示正确数据

内容的提问来源于stack exchange，提问作者mahdi nurezeman