Главная » PHP » Как отображать записи по нажатой клавише, используя ajax или php?

Как отображать записи по нажатой клавише, используя ajax или php?

Я могу отображать записи на странице, и поиск также работает после нажатия на кнопку поиска. Теперь моя проблема в том, как отображать записи по нажатой клавише.

Например, у меня есть 100 записей на одной странице, если какой-либо пользователь вводит что-либо в текстовое поле поиска, которое записи будут искать и отображать на экране.

Не могли бы вы помочь мне в этом?

HTML

<script>
$(function () {
$('#valueToSearch').on('keyup',function(){
//Your ajax call will go Here
$.ajax({
url:senddata.php, // separate file for search
data : {
q : $('#valueToSearch').val().trim()
},
method:'POST',
dataType:'json',
success:function(data){
$('#fetch_record').html(data);
},
error:function(data){
alert("something has gone wrong");
}
});
});
});
</script>
<form action="" method="post">
<input type="text" name="valueToSearch" placeholder="Value To Search"><br><br>
<input type="submit" name="search" value="search"><br><br>

<table>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>

<!-- populate table from mysql database -->
<?php while($row = mysqli_fetch_array($search_result)):?>
<tr>
<td><?php echo $row['id'];?></td>
<td><?php echo $row['firstname'];?></td>
<td><?php echo $row['lastname'];?></td>
<td><?php echo $row['email'];?></td>
</tr>
<?php endwhile;?>
</table>
</form>

senddata.php

    if(isset($_POST['q']) && $_POST['q'] !=''){
$valueToSearch = $_POST['q'];

// your sql query for Searching result
$query = "SELECT * FROM `test` WHERE CONCAT(`id`, `firstname`, `lastname`, `email`) LIKE '%".$valueToSearch."%'";
$result = $conn->query($query);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$id=$row["id"];
$fn=$row["firstname"];
$ln=$row["lastname"];
$email=$row["email"];
}
}
return json_encode($id, $fn, $ln, $email);
}

0

Решение

для этого вы должны обойти с Ajax, и будет много изменений, и я надеюсь, что вы разбираетесь в основных понятиях Javascript

Ниже код даст вам старт.

$('#searchboxID').on('keyup',function(){
//Your ajax call will go Here
$.ajax({
url:senddata.php, // separate file for search
data : {
q : $('#searchboxID').val().trim()
},
method:'POST',
dataType:'json',
success:function(data){
// replace your data in html
},
error:function(data){
alert("something has gone wrong");
}
});
});

В sendata.php

if(isset($_POST['q']) && $_POST['q'] !=''){
// your sql query for Searching result
return your result in json encoded format
}

Надеюсь, это поможет.

2

Другие решения

  1. Это то, как вы обнаруживаете изменение ввода и получаете значение из поля ввода.
$("input").keyup(function(e){
console.log($(this).val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />

  1. @Krunal объяснил, как сделать вызов ajax

  2. Измените код поиска так, чтобы ваш поиск $_POST['valueToSearch'] соответствует имени параметра в запросе ajax @Krunal написал его (что-то вроде $_POST['q'], ПРИМЕЧАНИЕ. — САНИТИЗИРУЙТЕ ПОЛУЧЕННЫЕ ДАННЫЕ ПЕРЕД ИСПОЛЬЗОВАНИЕМ ЗАПРОСОВ, КАК

  3. Ваш php-скрипт должен возвращать json-кодированный массив, используя json_encode () функция. Вы можете просто повторить полученную строку.

  4. Обрабатывать отраженные данные с success атрибут в вызове AJAX. Начните просто console.log()и приступайте к шагу 6.

  5. Пройдите по полученному массиву и добавьте созданные html-элементы в родительский контейнер. Образец в отрывок

0

Наконец, я нашел свое решение, используя Ajax, и я сделал с готовым заявлением. Сначала я отображаю все записи на странице индекса, и если пользователь что-то вводит в поиск, который передает Ajax на страницу процесса и возвращается на страницу индекса.

Пожалуйста, проверьте мой код и помогите мне более безопасным и простым способом или уменьшите количество строк кода.

Index.php

    <input type="text" name="search" >
<div id="table-container">
<?php
$query="SELECT id, firstname, lastname, email, message, location FROM test";
if ($stmt = $conn->prepare($query)) {
$stmt->execute();
$stmt->bind_result($id, $firstname, $lastname, $email, $message, $location);
echo '<table border="1"';
echo '<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email.</th>
<th>Message</th>
<th>location</th>
</tr>';

while ($stmt->fetch()) {
echo'<tr>
<td><input type="checkbox" onclick="" name="checkbox[]" value='.$id.'></td>
<td>'.$firstname.'</td>
<td>'.$lastname.'</td>
<td>'.$email.'</td>
<td>'.$message.'</td>
<td>'.$location.'</td>
</tr>
';
}
echo '</table>';
$stmt->close();
}
$conn->close();
?>
</table>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
$("input[name='search']").on('keyup',function()
{
var keyword = $(this).val();
$.ajax(
{
url:'process.php',
type:'POST',
data:'request='+keyword,
success:function(data)
{
$("#table-container").html(data);
//alert(data);
},
});
});
});
</script>

process.php

$request=$_POST['request'];

$query="SELECT id, firstname, lastname, email, message, location FROM `test` WHERE firstname LIKE '%" .$request. "%' OR lastname LIKE '%".$request  ."%' OR email LIKE '%" .$request ."%' OR location LIKE '%" .$request ."%'";
if ($stmt = $conn->prepare($query)) {
$stmt->execute();
$stmt->bind_result($id, $firstname, $lastname, $email, $message, $location);

echo '<table border="1"';
echo '<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email.</th>
<th>Message</th>
<th>location</th>
</tr>';

while ($stmt->fetch()) {
echo'<tr>
<td><input type="checkbox" onclick="" name="checkbox[]" value='.$id.'></td>
<td>'.$firstname.'</td>
<td>'.$lastname.'</td>
<td>'.$email.'</td>
<td>'.$message.'</td>
<td>'.$location.'</td>
</tr>
';
}
$stmt->close();
}
$conn->close();
0
Источник
По вопросам рекламы [email protected]
Web-Answers © 2024 Наверх