Question

我有一个实时搜索，它从数据库中提取所有相关信息并使用Ajax将其显示在与搜索相关的表中，因此它不刷新页面，我在每次搜索后都将其重置为重置什么都没有，直到它收到另一个输入，但我希望它显示它通常做的（所有信息）。

收到投入前： http://prntscr.com/hnmui8

收到输入后： http://prntscr.com/hnmv0r

删除输入后： http://prntscr.com/hnmv53

删除输入后的效果如何： http://prntscr.com/hnmvhr

的index.php

    <!DOCTYPE html>
<html>
    <head>
        <title>Webslesson Tutorial | Autocomplete Textbox using Bootstrap Typehead with Ajax PHP</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    </head>
    <body>
        <br /><br />
        <div class="container" style="width:600px;">
        <h2 align="center">Ajax live data search using Jquery PHP MySql</h2>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">Search</span>
                <input type="text" name="search_text" id="search_text" placeholder="Search by Customer Details" class="form-control" />
            </div>
        </div>
        <br />
        <div id="result">
            <div class='table-responsive'>
                <table class='table table-bordered'>
                <tr>
                    <th>Customer name</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>Potal code</th>
                    <th>Country</th>
                </tr>
                <?php
                    include('db.php');
                    $customers = DB::query('SELECT * FROM live');
                    foreach($customers as $p){
                      echo '<tr>
                              <td>'.$p["name"].'</td>
                              <td>'.$p["address"].'</td>
                              <td>'.$p["city"].'</td>
                              <td>'.$p["postCode"].'</td>
                              <td>'.$p["country"].'</td>
                            </tr>';
                    }

                    ?>
            </div>
        </div>
    </body>
</html>
<script>
    $('#search_text').keyup(function(){
      var txt = $(this).val();
      if(txt != ''){
        $.ajax({
          url: "fetch.php",
          method: "POST",
          data:{search:txt},
          dataType: "text",
          success:function(data){
            $('#result').html(data);
          }
        });
      }else{
        $('#result').html('');
    });
</script>

fetch.php

<?php
$connect = mysqli_connect("localhost", "root", "", "ajax");
$output = '';
$sql = "SELECT * FROM live WHERE name LIKE '%".$_POST['search']."%'";
$result = mysqli_query($connect, $sql);

if(mysqli_num_rows($result) > 0){
  $output .= "<h4 align='center'>Search result</h4>";
  $output .= "<div class='table-responsive'>
                <table class='table table-bordered'>
                  <tr>
                    <th>Customer name</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>Potal code</th>
                    <th>Country</th>
                  </tr>";

 while($row = mysqli_fetch_array($result)){
   $output .= '
               <tr>
                <td>'.$row["name"].'</td>
                <td>'.$row["address"].'</td>
                <td>'.$row["city"].'</td>
                <td>'.$row["postCode"].'</td>
                <td>'.$row["country"].'</td>
               </tr>
              ';
 }
 echo $output;
}else{
  echo "There are no customers.";
}

?>

谢谢，乙

Answer 1

您可以将原始数据集保存到变量中，如果输入为''，而不是将html内容设置为''，则可以从变量中恢复内容，如下所示：

var originalData = $('#result').html();
$('#search_text').keyup(function(){
  var txt = $(this).val();
  if(txt != ''){
    $.ajax({
      url: "fetch.php",
      method: "POST",
      data:{search:txt},
      dataType: "text",
      success:function(data){
        $('#result').html(data);
      }
    });
  } else {
    $('#result').html(originalData);
  }
});

Answer 2

最后更新：我（最近）意识到您的JS代码已经有一个空字符串检查（感谢@Taplar）。 @dferenc已经为您的案例发布了正确答案。但是如果你想确定你的清单是“新鲜的”，你仍然可以按照我的解决方案。

当您将空字符串作为参数值发送到服务器时，可以省略它。因此，您应该为此添加条件检查。

使用

$queryWord = isset($_POST['search']) ? $_POST['search'] : '';
$sql = "SELECT * FROM live WHERE name LIKE '%".$queryWord."%'";

或（在PHP7之后，您可以使用 null合并运算符）

$queryWord =  $_POST['search'] ?? '';
$sql = "SELECT * FROM live WHERE name LIKE '%".$queryWord."%'";

而不是

$sql = "SELECT * FROM live WHERE name LIKE '%".$_POST['search']."%'";

重要提示：始终谨防SQL注入！保护您的代码免受注入。你可以从   here

重要提示2 ：我建议您使用浏览器的“开发者控制台”功能。所有常用的浏览器都有内联工具   开发人员调试，跟踪网络请求和do some magic。

搜索后，Ajax将页面重置为正常

2 个答案: