Trong ví dụ này ta sẽ tạo một ô tìm kiếm, khi người dùng nhập vào ô tìm kiếm thì kết quả sẽ hiện ra ở dưới. Dữ liệu sẽ được php xử lí lấy từ database sau đó được gửi về trình duyệt xử lí.
Mình có cơ sở dữ liệu như sau :
mình tạo trang index gồm 1 ô seach và 1 bảng để hiển thị kết quả tìm kiếm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quốc Hùng IT</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<br />
<br />
<br />
<h2 align="center">Demo seach Ajax trong PHP MYSQL </h2><br />
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Search</span>
<input type="text" name="search_text" id="search_text" placeholder="Nhập từ cần tìm" class="form-control" />
</div>
</div>
<br />
<div id="result"></div>
</div>
<div style="clear:both"></div>
<br />
<br />
<br />
<br />
</body>
</html>
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"fetch.php",
method:"post",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
mình sử lý phần hiển thị bảng và kết quả tìm kiếm
Như các bạn đã biết khi seach trong sql , câu lệnh like được sử dụng rất nhiều
SELECT * FROM tbl_customer WHERE CustomerName LIKE '%".$search."%' OR Address LIKE '%".$search."%' OR City LIKE '%".$search."%' OR PostalCode LIKE '%".$search."%' OR Country LIKE '%".$search."%' ";
Mình có tổng quát file thứ 2 như sau
<?php
$connect = mysqli_connect("localhost", "ajax", "123456", "ajax");
mysqli_set_charset($connect , "utf8");
$output = '';
if(isset($_POST["query"]))
{
$search = mysqli_real_escape_string($connect, $_POST["query"]);
$query = "
SELECT * FROM tbl_customer
WHERE CustomerName LIKE '%".$search."%'
OR Address LIKE '%".$search."%'
OR City LIKE '%".$search."%'
OR PostalCode LIKE '%".$search."%'
OR Country LIKE '%".$search."%'
";
}
else
{
$query = "
SELECT * FROM tbl_customer ORDER BY CustomerID";
}
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
$output .= '<div class="table-responsive">
<table class="table table bordered">
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
</tr>';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["CustomerName"].'</td>
<td>'.$row["Address"].'</td>
<td>'.$row["City"].'</td>
<td>'.$row["PostalCode"].'</td>
<td>'.$row["Country"].'</td>
</tr>
';
}
echo $output;
}
else
{
echo 'Data Not Found';
}
?>
Demo bằng video
Chúc các bạn thành công !…
