回声JS onclick填充功能AJAX不起作用 [英] Echo JS onclick fill function AJAX not working
问题描述
我有一个带有AJAX,MySQL,PHP和JS的搜索栏.搜索栏在列表中的div中提供实时搜索结果,并在这方面起作用.
I have a search bar with AJAX, MySQL, PHP, and JS. The search bar gives live search results in a div in a list and works in that respect.
我的问题是,当单击div列表中的实时搜索结果时,搜索结果不会填充搜索栏的输入.没有任何反应,除非我单击它,否则列表一直保持打开状态.我曾经在我的旧代码中使用它,当您单击任何结果时它会填充搜索栏的输入,但是自从我重写了整个代码以来,我一直无法弄清为什么onclick
和fill
函数不起作用.现在开始工作.
My problem is the live search results in the div list when clicked on do not fill the search bar's input. Nothing happens and the list just stays open unless I click out of it. I used to have it working in my old code where when you click on any result it fills the search bar's input, but ever since I rewrote the whole code I can't figure out why the onclick
and fill
functions aren't working now.
如何解决此代码,以便当用户单击实时搜索结果列表中的结果之一时,它会填充搜索栏的输入内容?
这是我尝试过的内容,目前作为以下文件中的代码:
Here is what I've tried and currently have as my code in the following files:
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();
?>
推荐答案
您可以使用`符号代替javascript的单引号和双引号.
you can use the ` sign instead of the single and double quotation for javascript.
在这里,您应该像这样在ajax.php
文件中更新第16行.
Here you should just update the line 16 at ajax.php
file like this.
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();
}
}
});
}
});
});
这篇关于回声JS onclick填充功能AJAX不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!