搜索后Ajax將頁面重置為正常

Question

我有一個實時搜索，它從數據庫中提取所有相關信息，並使用Ajax將其顯示在與搜索相關的表中，因此它不會刷新頁面，我在每次搜索后都將其重置為沒有任何內容直到它收到另一個輸入，但我希望它顯示它通常做的事情（所有信息）。

刪除輸入后想要看起來像什么： 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.";
}

?>

謝謝，Ethan

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注入！ 保護您的代碼免受注入。 你可以從這里開始。

重要說明2 ：我建議您使用瀏覽器的“開發者控制台”功能。 所有常用的瀏覽器都有內聯工具，供開發人員調試，跟蹤網絡請求並做一些魔術。

搜索后Ajax將頁面重置為正常

問題描述

2 個解決方案

解決方案1
4 已采納 2017-12-14 22:30:25

解決方案2
1 2017-12-14 22:47:45

搜索后Ajax將頁面重置為正常

問題描述

2 個解決方案

解決方案1 4 已采納 2017-12-14 22:30:25

解決方案2 1 2017-12-14 22:47:45

解決方案1
4 已采納 2017-12-14 22:30:25

解決方案2
1 2017-12-14 22:47:45