我有一个搜索栏,可以使用 MySQL、PHP 和 JS 显示 AJAX 实时搜索结果。
问题是我不知道如何让搜索结果显示“未找到匹配项”或隐藏结果div
当查询与 MySQL 数据库中的任何“名称”不匹配时,完全不匹配。
目前,当用户在搜索栏中输入与数据库中的任何“名称”不匹配的内容时,AJAX 实时搜索结果下方会弹出一个空白结果。相反,我希望消息“未找到匹配项”来接管该空白结果。
我已经尝试了许多 else / if / echo 代码和不同顺序的组合,但到目前为止没有任何效果。我还尝试了一种不同的方法来显示/隐藏 div,根据结果显示“未找到匹配项”。
如何一劳永逸地修复此代码,以便当用户搜索与 MySQL 数据库中的任何名称不匹配的任何名称时,它将显示“未找到匹配项”?
以下是我当前使用的文件和代码:
索引.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>
脚本.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();
}
});
}
});
});