J'ai une barre de recherche qui fonctionne pour afficher les résultats de recherche en direct AJAX avec MySQL, PHP et JS.

Le problème est que je ne peux pas comprendre comment obtenir que les résultats de la recherche affichent "Aucune correspondance trouvée" ou masquer complètement les résultats div lorsqu'une requête ne correspond à aucun "Nom" dans la base de données MySQL.

Actuellement, lorsqu'un utilisateur tape quelque chose dans la barre de recherche qui ne correspond à aucun "Nom" dans la base de données, un résultat vide apparaît sous le résultat de la recherche en direct AJAX. J'aimerais plutôt que le message "Aucune correspondance trouvée" prenne en charge ce résultat vide.

J'ai essayé un certain nombre de codes et de combinaisons else / if / echo dans différents ordres et rien n'a fonctionné jusqu'à présent. J'essaie également une méthode différente pour afficher / masquer un div qui affiche "Aucune correspondance trouvée" en fonction des résultats.

Comment puis-je corriger ce code une fois pour toutes afin que lorsque l'utilisateur recherche un nom qui ne correspond à aucun nom dans la base de données MySQL, il affiche "Aucune correspondance trouvée" ?

Voici les fichiers et les codes que j'utilise actuellement :

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();
           }
       });
   }
 });
 });
2
SCodeSK71 18 mars 2019 à 21:30

2 réponses

Meilleure réponse

Mis à jour

Vous devez vérifier que vos données sont valides et que vous avez un résultat de votre requête de base de données ou non, s'il n'y a pas d'enregistrement, vous pouvez imprimer un message de données introuvables. vous devez vérifier la sortie de $ExecQuery et définir la condition if en fonction de cela. laissez-moi maintenant votre sortie et résultat j'espère que cela vous aide.

Mettre à jour ajax.php Dernière section mise à jour

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

Complétez 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();
?>

et votre code 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();
             }

           }
       });
   }
 });
 });

Changez les autres pièces selon vos besoins.

5
Nasser Ali Karimi 21 mars 2019 à 18:22

AJAX est Javascript asynchrone et XML. Pourquoi renvoyer du HTML ?

Pointeuses

  • Si vous faites cela via Ajax, je déconseille fortement d'envoyer du HTML pur. Vous devez renvoyer des données JSON et les gérer en conséquence côté client.

  • Utiliser PDO au lieu de MySQLi

Solution PHP

<?php
include "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);
}

Javascript des solutions :

$.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();
  }
});
0
kemicofa ghost 18 mars 2019 à 19:01