Отобразить «совпадений не найдено» или скрыть результаты DIV (AJAX & MySQL)
2 ответа
AJAX - это асинхронный Javascript и XML. Зачем отправлять обратно HTML?
Указатели
-
Если вы делаете это через Ajax, я бы настоятельно не рекомендовал отправлять чистый HTML. Вы должны отправить обратно некоторые данные JSON и обработать их соответственно на стороне клиента.
-
Используйте PDO вместо MySQLi
Решение PHP
<?php
include "db.php";
if (isset( AJAX - это асинхронный Javascript и XML. Зачем отправлять обратно HTML?
Указатели
-
Если вы делаете это через Ajax, я бы настоятельно не рекомендовал отправлять чистый HTML. Вы должны отправить обратно некоторые данные JSON и обработать их соответственно на стороне клиента.
-
Используйте PDO вместо MySQLi
Решение PHP
[110] Решение 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();
}
});
POST['search'])) {
$Name = AJAX - это асинхронный Javascript и XML. Зачем отправлять обратно HTML?
Указатели
-
Если вы делаете это через Ajax, я бы настоятельно не рекомендовал отправлять чистый HTML. Вы должны отправить обратно некоторые данные JSON и обработать их соответственно на стороне клиента.
-
Используйте PDO вместо MySQLi
Решение PHP
[110] Решение 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();
}
});
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();
}
});
Обновлен
. Вы должны проверить ваши данные, которые являются действительными, и у вас есть какой-либо результат из вашего запроса базы данных или нет, если нет записи, то вы можете напечатать сообщение не найденных данных. Вы должны проверить вывод $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( Обновлен
. Вы должны проверить ваши данные, которые являются действительными, и у вас есть какой-либо результат из вашего запроса базы данных или нет, если нет записи, то вы можете напечатать сообщение не найденных данных. Вы должны проверить вывод $ExecQuery и установить условие if в соответствии с этим. Позвольте мне теперь ваш вывод и результат, я надеюсь, что это поможет вам.
Обновление ajax.php Последнее обновление раздела
[110] Заполните ajax.php
[111] и ваш 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();
}
}
});
}
});
});
меняйте другие части по мере необходимости.
GET['search'])) {
//Search box value assigning to $Name variable.
$Name = Обновлен
. Вы должны проверить ваши данные, которые являются действительными, и у вас есть какой-либо результат из вашего запроса базы данных или нет, если нет записи, то вы можете напечатать сообщение не найденных данных. Вы должны проверить вывод $ExecQuery и установить условие if в соответствии с этим. Позвольте мне теперь ваш вывод и результат, я надеюсь, что это поможет вам.
Обновление ajax.php Последнее обновление раздела
[110] Заполните ajax.php
[111] и ваш 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();
}
}
});
}
});
});
меняйте другие части по мере необходимости.
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();
}
}
});
}
});
});
меняйте другие части по мере необходимости.