Javascript Echo JS onclick fill函数AJAX不工作

我有一个带有AJAX、MySQL、PHP和JS的搜索栏。搜索栏在列表的div中提供实时搜索结果，并在这方面起作用

我的问题是，当单击“不填充搜索栏的输入”时，div列表中的实时搜索结果。没有任何事情发生，列表只会保持打开状态，除非我点击它。我曾经在我的旧代码中使用它，当你点击任何结果时，它会填充搜索栏的输入，但是自从我重写了整个代码之后，我就不明白为什么

onclick

和

fill

函数现在不起作用了

如何修复此代码，以便当用户单击live search result列表中的一个结果时，它填充搜索栏的输入

以下是我在以下文件中尝试过的代码：

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>

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

ajax.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>

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

---

您可以使用`符号，而不是javascript的单引号和双引号

在这里，您应该像这样更新

ajax.php

文件中的第16行

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

echo“
”。$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();
           }
        }
    });
   }
 });
});

//从“ajax.php”中获取值。
函数填充（值）{
//为“index.php”文件中的“search”div赋值。
$（'#search'）.val（值）；
//在“index.php”文件中隐藏“display”div。
$（'#display'）.hide（）；
}
$（文档）.ready（函数（）{
//按下“indexd.php”文件中“搜索框”上的键。将调用此函数。
$（“#搜索”）.keyup（函数（）{
//将搜索框值分配给名为“name”的javascript变量。
$（'#display'）.hide（）；
$（'#backspace'）.css（“显示”、“无”）；
var name=$（'#search'）.val（）；
//正在验证，如果“名称”为空。
如果（名称==“”）{
//将空值赋给“index.php”文件中的“display”div。
$（'#backspace'）.css（“显示”、“块”）；
}
//如果名称不为空。
否则{
//AJAX被称为。
$.ajax({
//AJAX类型是“GET”。
键入：“获取”，
//数据将被发送到“ajax.php”。
url:“ajax.php”，
//数据，该数据将被发送到“ajax.php”。
数据：{
//将“name”的值赋给“search”变量。
搜索：名称
},
//如果找到结果，将调用此函数。
成功：函数（html）{
如果（html='
未找到结果！
'））{
$（“#无结果”）.css（“显示”、“块”）；
}否则{
//将结果分配给“index.php”文件中的“display”div。
$（“#display”）.html（html）.show（）；
}
}
});
}
});
});

当以HTML“

）**当然，Nasser，您的知识非常渊博，并且非常容易理解代码。