显示“未找到匹配项"或隐藏DIV结果(AJAX和MySQL) [英] Display “No matches found” or hide DIV results (AJAX & MySQL)

问题描述

我有一个搜索栏，用于显示MySQL，PHP和JS的AJAX实时搜索结果.

问题是当查询与MySQL数据库中的任何名称"都不匹配时，我不知道如何获取搜索结果以显示未找到匹配项"或完全隐藏结果div./p>

当前，当用户在搜索栏中输入与数据库中任何名称"都不匹配的内容时，AJAX实时搜索结果下方会弹出空白结果.相反，我希望消息未找到匹配项"取代该空白结果.

我已经尝试了许多其他/if/回声代码以及不同顺序的组合，但到目前为止没有任何效果.我还尝试根据结果显示/隐藏显示未找到匹配项"的div的另一种方法.

如何一劳永逸地修复此代码，以便当用户在MySQL数据库中搜索与任何名称都不匹配的任何名称时，它会显示找不到匹配项"?

以下是我当前正在使用的文件和代码:

index.php

<form>  
 <input type="text" id="search" class="search" data-js="form-text" 
  placeholder="Search Over 100+ Resources..." autocomplete="off">
 <button type="submit" class="Button" value="Submit"><i class="fa fa- 
  search"></i></button>
 <div id="display"></div>
<div id="no-results" style="display:none"><ul><li id='hover'>No matches 
 found</li></ul></div>
</form>

ajax.php

<?php
//Including Database configuration file.
include "db.php";
//Getting value of "search" variable from "script.js".
if (isset($_GET['search'])) {
//Search box value assigning to $Name variable.
$Name = $_GET['search'];
//Search query.
$Query = "SELECT Name FROM search WHERE Name LIKE '$Name%' LIMIT 5";
//Query execution
$ExecQuery = MySQLi_query($con, $Query);
//Creating unordered list to display result.
 echo '<ul>';
 //Fetching result from database.
 while ($Result = MySQLi_fetch_array($ExecQuery)) {
   ?>
 <!-- Creating unordered list items.
    Calling javascript function named as "fill" found in "script.js" file.
    By passing fetched result as parameter. -->
 <li onclick='fill("<?php echo $Result['Name']; ?>")'>
 <a>
 <!-- Assigning searched result in "Search box" in "index.php" file. -->
   <?php 
 if ($ExecQuery > "0") {
 echo $Result['Name'];
 }
 else {
  echo "<li id='hover'>No matches found</li>";
 }
?>
</li></a>
<!-- Below php code is just for closing parenthesis. Don't be confused. -->
<?php
}}

?>
</ul>

script.js

//Getting value from "ajax.php".
function fill(Value) {
//Assigning value to "search" div in "index.php" file.
$('#search').val(Value);
//Hiding "display" div in "index.php" file.
$('#display').hide();
}
$(document).ready(function() {
//On pressing a key on "Search box" in "index.php" file. This function will 
be called.
$('#no-results').hide();
$("#search").keyup(function() {
   //Assigning search box value to javascript variable named as "name".
   $('#display').hide();
   $('#no-results').css("display", "none");
   var name = $('#search').val();
   //Validating, if "name" is empty.
   if (name == "") {
       //Assigning empty value to "display" div in "index.php" file.
       $('#no-results').css("display", "none");
   }
   //If name is not empty.
   else {
       //AJAX is called.
       $.ajax({
           //AJAX type is "Post".
           type: "GET",
           //Data will be sent to "ajax.php".
           url: "ajax.php",
           //Data, that will be sent to "ajax.php".
           data: {
               //Assigning value of "name" into "search" variable.
               search: name
           },
           //If result found, this funtion will be called.
           success: function(html) {
               //Assigning result to "display" div in "index.php" file.
               $("#display").html(html).show();
           }
       });
   }
 });
 });

解决方案

已更新

您应该检查您的数据是否有效，并且数据库查询是否有任何结果，如果没有记录，那么您可以打印未找到数据的消息. 您应该检查$ExecQuery的输出并据此设置if条件. 现在让我输入您的输出和结果，希望对您有所帮助.

更新ajax.php 上次更新的部分

echo "<li onclick='fill(`".$Result['Name']."`)'>".$Result['Name']."</li>";

完成ajax.php

  <?php
    //Including Database configuration file.
    include "db.php";
    //Getting value of "search" variable from "script.js".
if (isset($_GET['search'])) {
//Search box value assigning to $Name variable.
$Name = $_GET['search'];
//Search query.
$Query = "SELECT Name FROM search WHERE Name LIKE '$Name%' LIMIT 5";
//Query execution
$ExecQuery = MySQLi_query($con, $Query);
//Creating unordered list to display result.
    if ($ExecQuery->num_rows > 0) {
         echo "<ul>";
         while ($Result = MySQLi_fetch_array($ExecQuery)) {
            // use the onclick function that defined in js file. you can use the `  sign in js instead of ' if you needed.
            echo "<li onclick='fill(`".$Result['Name']."`)'>".$Result['Name']."</li>";
         }
        echo "</ul>";
    }else{
        echo "<ul><li>No Result Found!</li></ul>";      
    }
}
die();
?>

和您的Ajax代码.

function fill(value) {
  console.log(value);
  $('#search').val(value);
  $('#display').hide();
}
 $(document).ready(function() {
//On pressing a key on "Search box" in "index.php" file. This function will be called.
$("#search").keyup(function() {
   //Assigning search box value to javascript variable named as "name".
   $('#display').hide();
   $('#no-results').css("display", "none");
   var name = $('#search').val();
   //Validating, if "name" is empty.
   if (name == "") {
       //Assigning empty value to "display" div in "index.php" file.
       $('#no-results').css("display", "block");
   }
   //If name is not empty.
   else {
       //AJAX is called.
       $.ajax({
           //AJAX type is "Post".
           type: "GET",
           //Data will be sent to "ajax.php".
           url: "ajax.php",
           //Data, that will be sent to "ajax.php".
           data: {
               //Assigning value of "name" into "search" variable.
               search: name
           },
           //If result found, this funtion will be called.
           success: function(html) {

           if (html == '<ul><li>No Result Found!</li></ul>') {
              $('#no-results').css("display", "block");
            }else{
               //Assigning result to "display" div in "index.php" file.
                 $("#display").html(html).show();
             }

           }
       });
   }
 });
 });

根据需要更改其他部分.

I have a search bar that works for displaying AJAX live search results with MySQL, PHP, and JS.

The problem is I can’t figure out how to get the search results to display "No matches found" or hide the results div completely when a query doesn’t match any "Name" in the MySQL database.

Currently, when a user types something into the search bar that doesn’t match any "Name" in the database, a blank result pops up under the AJAX live search result. I would instead like for the message "No matches found" to take over that blank result.

I have tried a number of else / if / echo codes and combinations in different orders and nothing has worked so far. I am also trying a different method of showing / hiding a div that displays "No matches found" based on the results.

How can I fix this code once and for all so that when the user searches any name that doesn’t match any name in the MySQL database, it will display "No matches found"?

Below are the files and codes I am currently using:

index.php

<form>  
 <input type="text" id="search" class="search" data-js="form-text" 
  placeholder="Search Over 100+ Resources..." autocomplete="off">
 <button type="submit" class="Button" value="Submit"><i class="fa fa- 
  search"></i></button>
 <div id="display"></div>
<div id="no-results" style="display:none"><ul><li id='hover'>No matches 
 found</li></ul></div>
</form>

ajax.php

<?php
//Including Database configuration file.
include "db.php";
//Getting value of "search" variable from "script.js".
if (isset($_GET['search'])) {
//Search box value assigning to $Name variable.
$Name = $_GET['search'];
//Search query.
$Query = "SELECT Name FROM search WHERE Name LIKE '$Name%' LIMIT 5";
//Query execution
$ExecQuery = MySQLi_query($con, $Query);
//Creating unordered list to display result.
 echo '<ul>';
 //Fetching result from database.
 while ($Result = MySQLi_fetch_array($ExecQuery)) {
   ?>
 <!-- Creating unordered list items.
    Calling javascript function named as "fill" found in "script.js" file.
    By passing fetched result as parameter. -->
 <li onclick='fill("<?php echo $Result['Name']; ?>")'>
 <a>
 <!-- Assigning searched result in "Search box" in "index.php" file. -->
   <?php 
 if ($ExecQuery > "0") {
 echo $Result['Name'];
 }
 else {
  echo "<li id='hover'>No matches found</li>";
 }
?>
</li></a>
<!-- Below php code is just for closing parenthesis. Don't be confused. -->
<?php
}}

?>
</ul>

script.js

//Getting value from "ajax.php".
function fill(Value) {
//Assigning value to "search" div in "index.php" file.
$('#search').val(Value);
//Hiding "display" div in "index.php" file.
$('#display').hide();
}
$(document).ready(function() {
//On pressing a key on "Search box" in "index.php" file. This function will 
be called.
$('#no-results').hide();
$("#search").keyup(function() {
   //Assigning search box value to javascript variable named as "name".
   $('#display').hide();
   $('#no-results').css("display", "none");
   var name = $('#search').val();
   //Validating, if "name" is empty.
   if (name == "") {
       //Assigning empty value to "display" div in "index.php" file.
       $('#no-results').css("display", "none");
   }
   //If name is not empty.
   else {
       //AJAX is called.
       $.ajax({
           //AJAX type is "Post".
           type: "GET",
           //Data will be sent to "ajax.php".
           url: "ajax.php",
           //Data, that will be sent to "ajax.php".
           data: {
               //Assigning value of "name" into "search" variable.
               search: name
           },
           //If result found, this funtion will be called.
           success: function(html) {
               //Assigning result to "display" div in "index.php" file.
               $("#display").html(html).show();
           }
       });
   }
 });
 });

解决方案

Updated

you should check your data that is valid and you have any result from your database query or not, if there is no record then you can print not found data message. you should check the output of $ExecQuery and set if condition according to that. let me now your output and result I hope this helps you.

Update ajax.php Last updated section

echo "<li onclick='fill(`".$Result['Name']."`)'>".$Result['Name']."</li>";

Complete ajax.php

  <?php
    //Including Database configuration file.
    include "db.php";
    //Getting value of "search" variable from "script.js".
if (isset($_GET['search'])) {
//Search box value assigning to $Name variable.
$Name = $_GET['search'];
//Search query.
$Query = "SELECT Name FROM search WHERE Name LIKE '$Name%' LIMIT 5";
//Query execution
$ExecQuery = MySQLi_query($con, $Query);
//Creating unordered list to display result.
    if ($ExecQuery->num_rows > 0) {
         echo "<ul>";
         while ($Result = MySQLi_fetch_array($ExecQuery)) {
            // use the onclick function that defined in js file. you can use the `  sign in js instead of ' if you needed.
            echo "<li onclick='fill(`".$Result['Name']."`)'>".$Result['Name']."</li>";
         }
        echo "</ul>";
    }else{
        echo "<ul><li>No Result Found!</li></ul>";      
    }
}
die();
?>

and your ajax code.

function fill(value) {
  console.log(value);
  $('#search').val(value);
  $('#display').hide();
}
 $(document).ready(function() {
//On pressing a key on "Search box" in "index.php" file. This function will be called.
$("#search").keyup(function() {
   //Assigning search box value to javascript variable named as "name".
   $('#display').hide();
   $('#no-results').css("display", "none");
   var name = $('#search').val();
   //Validating, if "name" is empty.
   if (name == "") {
       //Assigning empty value to "display" div in "index.php" file.
       $('#no-results').css("display", "block");
   }
   //If name is not empty.
   else {
       //AJAX is called.
       $.ajax({
           //AJAX type is "Post".
           type: "GET",
           //Data will be sent to "ajax.php".
           url: "ajax.php",
           //Data, that will be sent to "ajax.php".
           data: {
               //Assigning value of "name" into "search" variable.
               search: name
           },
           //If result found, this funtion will be called.
           success: function(html) {

           if (html == '<ul><li>No Result Found!</li></ul>') {
              $('#no-results').css("display", "block");
            }else{
               //Assigning result to "display" div in "index.php" file.
                 $("#display").html(html).show();
             }

           }
       });
   }
 });
 });

change other parts as you need.

这篇关于显示“未找到匹配项"或隐藏DIV结果(AJAX和MySQL)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！