[英]Display “No matches found” or hide DIV results (AJAX & MySQL)
我有一個搜索欄,用於顯示MySQL,PHP和JS的AJAX實時搜索結果。
問題是當查詢與MySQL數據庫中的任何“名稱”都不匹配時,我不知道如何獲取搜索結果以顯示“未找到匹配項”或完全隱藏結果div
。
當前,當用戶在搜索欄中鍵入與數據庫中任何“名稱”都不匹配的內容時,AJAX實時搜索結果下方將彈出空白結果。 相反,我希望消息“未找到匹配項”接管該空白結果。
我已經嘗試了許多其他/如果/回聲代碼和組合以不同的順序,到目前為止沒有任何工作。 我還嘗試根據結果顯示/隱藏顯示“未找到匹配項”的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();
}
});
}
});
});
更新
您應該檢查數據是否有效,是否從數據庫查詢中得到任何結果,如果沒有記錄,則可以打印未找到數據消息。 你應該檢查的輸出$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();
}
}
});
}
});
});
根據需要更改其他零件。
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();
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.