使用 ajax 进行实时数据搜索。输入为空时如何显示另一个查询

Question

我正在尝试使用 ajax、jquery、php 和 mysql 创建实时搜索。用户输入一些输入，它将搜索发送到 form_livesearch.php。我让那部分工作了。否则如果输入为空，则显示其他查询。（这部分我需要帮助）

                 <div id="container" class="col-md-12"> 
                    <div class="row">
                      <h2>Quick Search</h2>
                      <input class='form-control' type="text" id='live_search' placeholder='Search our inventory'>

                      <br>
                      <br>

                      <h2 class="" id="searchresult">    
                      </h2>    
                    </div>
                  </div> 


    $(document).ready(function(){
       
       $("#live_search").keyup(function(){
                             
            var input = $(this).val();
            
            
            if(input != ""){
                
                $.ajax({
                    
                    url:"form_livesearch.php",
                    method:"POST",
                    data:{input:input},
                    
                    success:function(data){
                        
                        $("#searchresult").html(data);
                        $("#searchresult").css("display","block");
                        
                    } 
                    
                    
                });
    
                
                
            } else {
                
                 // If the input field is empty
                 // How display another php query here?
    
            }
           

                              
       });
       
       
       
   });

这是我在输入字段为空时尝试显示的 php 和 mysql。

    <?php                 
                      
                      
    $query = "SELECT * FROM `my_db` . `my_table` WHERE s_category = 'policy' ORDER BY id ASC";
    
    $result = mysqli_query($db,$query);
                      
    if(!$result){
                    
        die("Query Failed " . mysqli_error($db));
        
    }                 
    
    if(mysqli_num_rows($result) > 0){
    ?>
                      
       <h3>Policies</h3>
            <ul>

               <?php
                    
                    while($row = mysqli_fetch_assoc($result)){
                        
                        $id = $row['id'];
                        $s_url = $row['s_url'];
                        $s_name = $row['s_name'];
                        $s_category = $row['s_category'];  
                        
                        ?>
                                            
                            <li><a href="<?php echo $s_url ?>"><?php echo $s_name?></a> <img src="https://www.xxxxxxx.xxx/xxxx/images/pdf.gif" alt="PDF"></li>
                   
                        <?php
                    }
               ?>
                
            </ul>
            
       <?php
            
    }
                      
?>

form_livesearch.php:

if(isset($_POST['input'])){

$input = $_POST['input'];
    
    //to prevent from mysqli injection
    // x'='x
    $input = stripcslashes($input);
    $input = mysqli_real_escape_string($db, $input);
    
    $input = str_replace('%', ' @', $input);
    $input = str_replace("'", ' @', $input);
    
    $query = "SELECT * FROM `my_db` . `my_table` WHERE s_name LIKE '%{$input}%' ORDER BY id ASC";
    
    $result = mysqli_query($db,$query);
    
    if(mysqli_num_rows($result) > 0){?>
       
       <table class="table table-bordered table-striped mt-4">
<!--
           <thead>
               <tr>
                   <th>id</th>
                   <th>name</th>
               </tr>
           </thead>
-->
           <tbody>
               <?php
                
                while($row = mysqli_fetch_assoc($result)){
                    
                    $id = $row['id'];
                    $s_url = $row['s_url'];
                    $s_name = $row['s_name'];
                    $s_category = $row['s_category'];
                    
                
                    
                    ?>
                    
                    <tr>
                        <td style="font-size: 14px;"><a href="<?php echo $s_url; ?>"><?php echo $s_name;?></a> <img src="https://www.xxxxx.xxxx/xxxxx/images/pdf.gif" alt="PDF"></td>
                    </tr>
                    
                    
                    
                    <?php
                }
           
    
            ?>
       </tbody>
   </table>
   
   
   <?php 
    
}else{
    
    echo "<h6 class='text-danger text-center mt-3'>No data Found</h6>";
}

} 


?>

Answer 1

你应该在 PHP 文件中处理这些东西。顺便说一下，当你把 ajax 放在 keyup 事件中时，输入不能为空。当用户使用退格键删除他搜索的内容时，它就发生了。

所以 form_livesearch.php PHP 文件应该是这样的。

<?php

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);



$output = "";
if(isset($_POST['input'])){

    $input = $_POST['input'];
    if(!empty($input)){

        $input = str_replace('%', ' @', $input);
        $input = str_replace("'", ' @', $input);

        $input = "%$input%"; // prepare the $input variable 
        $query = "SELECT * FROM `my_db` . `my_table` WHERE s_name LIKE ? ORDER BY id ASC";
        $stmt = $conn->prepare($query); 
        $stmt->bind_param("s", $input); // here we can use only a variable
        $stmt->execute();
        

    }else{
        $query = "SELECT * FROM `my_db` . `my_table` WHERE s_category = 'policy' ORDER BY id ASC";
        $stmt = $conn->prepare($query); 
        $stmt->execute();
    }

    $result = $stmt->get_result(); // get the mysqli result
    
    
    if($result->num_rows > 0){ 
       
        if(empty($input))
            $output = '<table class="table table-bordered table-striped mt-4"><tbody>';
        else
            $output = '<h3>Policies</h3><ul>';
                
                while($row = $result->fetch_assoc()){
                    
                    $id = $row['id'];
                    $s_url = $row['s_url'];
                    $s_name = $row['s_name'];
                    $s_category = $row['s_category'];
                
                
                    if(empty($input))
                        $output .= '
                            <tr>
                                <td style="font-size: 14px;"><a href="' . $s_url . '">' . $s_name .'</a> <img src="https://www.xxxxx.xxxx/xxxxx/images/pdf.gif" alt="PDF"></td>
                            </tr>';
                    else
                        $output .= '<li><a href="' . $s_url . '">' . $s_name . '</a> <img src="https://www.xxxxxxx.xxx/xxxx/images/pdf.gif" alt="PDF"></li>';
                    
                }
           
    
        if(empty($input))
            $output .= '</tbody></table>';
        else
            $output .= '</ul>';
   
        echo $output;
    
    }else{
    
        echo "<h6 class='text-danger text-center mt-3'>No data Found</h6>";
    }

} 


?>

您可以使用单独的文件来处理 2 种类型，但由于它们都是关于产品的，因此最好使用一个文件。

return 数据并让前端构建 HTML 输出是一个很好的做法，但是如果你想在 PHP 文件中构建 HTML，它是最好将它们包裹在一个字符串中。

另外，使用MySQLi的prepare语句来防止SQL注入。查看 this 示例以获取更多信息。

html 文件应该是这样的：

<div id="container" class="col-md-12"> 
    <div class="row">
      <h2>Quick Search</h2>
      <input class='form-control' type="text" id='live_search' placeholder='Search our inventory'>

      <br>
      <br>

      <h2 class="" id="searchresult">    
      </h2>    
    </div>
  </div> 

<script type="text/javascript">
    $(document).ready(function(){
    // will execute once the page load
       getData();
       $("#live_search").keyup(function(){
                             
            let input = $(this).val();
            getData(input);
        
       });
   }); 


function getData(input = ''){

    $.ajax({
                    
        url:"form_livesearch.php",
        method:"POST",
        data:{input:input},
        
        success:function(data){
            
            $("#searchresult").html(data);
            $("#searchresult").css("display","block");
            
        } 
                    
                    
    });         


}
</script>

使用 ajax 进行实时数据搜索。输入为空时如何显示另一个查询

Live data search using ajax. How to display another query when input is empty

javascript

php

mysql

ajax

jquery