Hôm nay mình sẽ hướng dẫn các bạn làm live search, tức là kết quả tìm kiếm sẽ hiển thị nhưng không load lại website. Ajax sẽ là từ khóa của bài viết này 🙂
Bước 1: Tạo database country với tables country gồm trường id và country.
Bước 2: Xây dựng một số file như sau:
File index.html: form tìm kiếm
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="ajax.js"></script> </head> <body> <input type="text" style="width:300px; margin:0px;" placeholder="Nhập tên nước cần tìm" onkeyup="livesearch(this.value);"></input> <div id='result' style="background-color:#F0F0F0; width:300px;"> </div> </body> </html>
File ajax.js: gửi yêu cầu lên server xử lý và hiển thị kết quả trả về
function object(){
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
http = object();
function livesearch(data){
if(data != ""){
http.onreadystatechange = process;
http.open('GET', 'get.php?data=' + data, true);
http.send();
}else{
document.getElementById("result").innerHTML = "";
}
}
function process(){
if(http.readyState==4 && http.status==200){
result = http.responseText;
document.getElementById("result").innerHTML = result;
}
}
File get.php: làm nhiệm vụ nhận request từ client, xử lý tìm kiểm và trả về dữ liệu.
<?php
if(isset($_GET['data'])){
$data = $_GET['data'];
$con = mysqli_connect("localhost","database_username","password","ten_database");
// Kiểm tra kết nối
if (mysqli_connect_errno()){
echo "Lỗi kết nối: " . mysqli_connect_error();
}
$sql = "SELECT * FROM country WHERE country LIKE '$data%'";
$result = mysqli_query($con, $sql);
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
echo $row['country']."</br>";
}
//Đóng kết nối
mysqli_close($con);
}
?> Đối với file get.php bạn cần thay đổi database_username, password và ten_database đúng như database của bạn.
Tuần tự xử lý: khi bạn gõ chữ cái vào ô search, sự kiện onkeyup (index.html) sẽ gọi hàm livesearch(ajax.js), hàm livesearch sẽ gửi chữ cái vừa gõ lên server thông qua phương thức get. Server xử lý và trả về. Nhận được kết quả thì hàm process (ajax.js) sẽ hiển thị kết quả.
Đây là hướng dẫn cơ bản, từ đây bạn có thể tùy chỉnh css cho trang search đẹp hơn hoặc hiển thị thêm hình ảnh chẳng hạn.
