Display “no Matches Found” Or Hide Div Results (ajax & Mysql)

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 m

Solution 1:

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.

functionfill(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.

Solution 2:

AJAX is Asynchronous Javascript and XML. Why send back HTML ?

Pointers

• If you're doing this via Ajax I would highly dis-advise sending pure HTML. You should send back some JSON data and handle it accordingly client side.

• Use PDO instead of MySQLi

Solution PHP

<?phpinclude"db.php";
if (isset($_POST['search'])) {
  $Name = $_POST['search'];
  $Query = "SELECT Name FROM search WHERE Name LIKE '$Name%' LIMIT 5";
  $ExecQuery = MySQLi_query($con, $Query);

  $res = [];
  while ($Result = MySQLi_fetch_array($ExecQuery)) {
    $res[] = $Result['Name'];
  }

  echo json_encode($res);
}

Solution Javascript:

$.ajax({
  //AJAX type is "Post".type: "POST",
  //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(data) {
    //Assigning result to "display" div in "search.php" file.const list = JSON.parse(data);
    const html = list.length > 0 ? 
      list.map(name=>{
        `<li onclick="${name}">
           <a>${name}</a>
        </li>`
      }).join("") :
      `<li>No matches found</li>`

    $("#display").html(`<ul>${html}</ul>`).show();
  }
});