Функция заполнения Echo JS onclick AJAX не работает

Question

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

Моя проблема заключается в том, что живые результаты поиска в списке div при нажатии не заполняют ввод панели поиска.Ничего не происходит, и список остается открытым, пока я не нажму на него.Раньше он работал в моем старом коде, где при нажатии на любой результат он заполняет ввод строки поиска, но с тех пор, как переписал весь код, я не могу понять, почему функции onclick и fill не отображаются.t работает сейчас.

Как я могу исправить этот код, чтобы, когда пользователь нажимает на один из результатов в списке результатов поиска в режиме реального времени, он заполнял ввод в строке поиска?

Вот что я пробовал и в настоящее время имею в качестве своего кода в следующих файлах:

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="backspace" style="display:none"></div>
</form>

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 "indexd.php" file. This function will 
be called.
$("#search").keyup(function() {
//Assigning search box value to javascript variable named as "name".
$('#display').hide();
$('#backspace').css("display", "none");
var name = $('#search').val();
//Validating, if "name" is empty.
if (name == "") {
   //Assigning empty value to "display" div in "index.php" file.
   $('#backspace').css("display", "block");
}
//If name is not empty.
else {
    //AJAX is called.
    $.ajax({
        //AJAX type is "GET".
        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();
        }
    });
   }
 });
});

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)) {
            echo "<li onclick='fill".$Result['Name']."'>".$Result['Name']." 
     </li>";
     }
    echo "</ul>";
   }
  }
 die();
?>

Answer 1

вы можете использовать знак `вместо одинарных и двойных кавычек для javascript.

Здесь вы должны просто обновить строку 16 в файле ajax.php следующим образом.

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

Полный код 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)) {
            echo "<li onclick='fill(`".$Result['Name']."`)'>".$Result['Name']." 
     </li>";
     }
    echo "</ul>";
   }
  }
 die();
?>

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 "indexd.php" file. This function will be called.
$("#search").keyup(function() {
//Assigning search box value to javascript variable named as "name".
$('#display').hide();
$('#backspace').css("display", "none");
var name = $('#search').val();
//Validating, if "name" is empty.
if (name == "") {
   //Assigning empty value to "display" div in "index.php" file.
   $('#backspace').css("display", "block");
}
//If name is not empty.
else {
    //AJAX is called.
    $.ajax({
        //AJAX type is "GET".
        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();
           }
        }
    });
   }
 });
});