Отобразить «совпадений не найдено» или скрыть результаты DIV (AJAX и MySQL)

Question

У меня есть панель поиска, которая работает для отображения результатов поиска в реальном времени AJAX с MySQL, PHP и JS.

Проблема в том, что я не могу понять, как заставить результаты поиска отображать «Результаты не найдены» или полностью скрывать результаты div, когда запрос не соответствует ни одному «Имя» в базе данных MySQL.

В настоящее время, когда пользователь вводит что-то в строку поиска, которая не соответствует ни одному из «Имен» в базе данных, под результатом поиска в реальном времени AJAX появляется пустой результат. Вместо этого я хотел бы, чтобы сообщение «Не найдено ни одного совпадения» заняло этот пустой результат.

Я пробовал несколько кодов и комбинаций else / if / echo в разных порядках, и пока ничего не получалось. Я также пытаюсь использовать другой метод отображения / скрытия элемента 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();
           }
       });
   }
 });
 });

Answer 1

Обновлено

. Вы должны проверить свои данные, которые являются действительными, и у Вас есть какой-либо результат из запроса базы данных или нет, если нет записи, то вы можете напечатать сообщение не найденных данных.Вы должны проверить вывод $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();
             }

           }
       });
   }
 });
 });

измените другие детали по мере необходимости.

Answer 2

AJAX - это асинхронный Javascript и XML.Зачем отправлять обратно HTML?

Указатели

• Если вы делаете это через Ajax, я бы настоятельно не рекомендовал отправлять чистый HTML.Вы должны отправить обратно некоторые данные JSON и обработать их соответствующим образом на стороне клиента.

• Использовать PDO вместо MySQLi

Решение 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:

$.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();
  }
});