PHP - Tìm kiếm Tự động Hoàn chỉnh AJAX
Giới thiệu
Xin chào! Chào mừng bạn đến với hành trình của chúng tôi vào thế giới lập trình với PHP và AJAX. Hôm nay, chúng ta sẽ cùng nhau khám phá cách tạo tính năng tìm kiếm tự động hoàn chỉnh bằng PHP và AJAX. Hướng dẫn này dành cho người mới bắt đầu không có kinh nghiệm lập trình trước đây. Hãy cùng bắt đầu nhé!
Tài liệu XML
Trước khi chúng ta có thể tạo tính năng tìm kiếm tự động hoàn chỉnh, chúng ta cần thiết lập một tài liệu XML sẽ служить nguồn dữ liệu của chúng ta. Một tài liệu XML là một bộ dữ liệu được lưu trữ trong một định dạng cấu trúc hóa mà cả con người và máy móc đều có thể dễ dàng đọc. Trong trường hợp này, tài liệu XML của chúng ta sẽ chứa một danh sách các thành phố trên toàn thế giới.
<?xml version="1.0" encoding="UTF-8"?>
<cities>
<city>New York</city>
<city>Los Angeles</city>
<city>Chicago</city>
<city>Houston</city>
<city>Phoenix</city>
<city>Philadelphia</city>
<city>San Antonio</city>
<city>San Diego</city>
<city>Dallas</city>
<city>San Jose</city>
</cities>Lưu tài liệu XML này với tên cities.xml trong cùng thư mục với tệp PHP của bạn.
Mã JavaScript
Bây giờ chúng ta đã có tài liệu XML sẵn sàng, đã đến lúc viết một đoạn mã JavaScript để lấy dữ liệu từ tài liệu XML và hiển thị nó trong một danh sách thả xuống khi người dùng bắt đầu gõ vào ô tìm kiếm. Chúng ta sẽ sử dụng AJAX để đạt được điều này mà không cần làm mới trang.
Thứ nhất, hãy tạo một biểu mẫu HTML với một ô tìm kiếm và một danh sách gợi ý:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tìm kiếm Tự động Hoàn chỉnh</title>
</head>
<body>
<form id="searchForm">
<input type="text" id="searchBox" onkeyup="showSuggestions(this.value)">
<select id="suggestionList"></select>
</form>
<script src="autocomplete.js"></script>
</body>
</html>Tiếp theo, hãy viết mã JavaScript trong một tệp riêng biệt có tên autocomplete.js:
function showSuggestions(str) {
if (str.length == 0) {
document.getElementById("suggestionList").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("suggestionList").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "get_suggestions.php?q=" + str, true);
xmlhttp.send();
}
}Trong đoạn mã này, chúng ta định nghĩa một hàm叫做 showSuggestions nhận một chuỗi làm đầu vào. Khi người dùng gõ gì vào ô tìm kiếm, hàm này sẽ được gọi với giá trị đầu vào. Nếu độ dài đầu vào là zero, chúng ta xóa sạch danh sách gợi ý. Ngược lại, chúng ta tạo một đối tượng XMLHttpRequest để gửi yêu cầu AJAX đến một tệp PHP có tên get_suggestions.php với tham số truy vấn q đặt là giá trị đầu vào.
Mã PHP
Bây giờ, hãy chuyển sang phần mã PHP. Chúng ta sẽ tạo một tệp có tên get_suggestions.php để xử lý yêu cầu AJAX và trả về các tên thành phố khớp với nhau dưới dạng danh sách HTML:
<?php
$query = $_GET['q'];
$xml = simplexml_load_file('cities.xml');
$matchingCities = array();
foreach ($xml->city as $city) {
if (strpos(strtolower($city), strtolower($query)) !== false) {
$matchingCities[] = $city;
}
}
echo '<ul>';
foreach ($matchingCities as $city) {
echo '<li>' . $city . '</li>';
}
echo '</ul>';
?>Trong đoạn mã PHP này, chúng ta đầu tiên tải tài liệu XML sử dụng hàm simplexml_load_file. Sau đó, chúng ta duyệt qua mỗi thành phố trong tài liệu XML và kiểm tra xem chuỗi truy vấn có tồn tại trong tên thành phố hay không (không phân biệt chữ hoa chữ thường). Nếu có khớp, chúng ta thêm thành phố vào mảng $matchingCities. Cuối cùng, chúng ta xuất một danh sách không有序 (<ul>) chứa các tên thành phố khớp dưới dạng các mục danh sách (<li>).
Đó là tất cả! Bây giờ bạn đã có một tính năng tìm kiếm tự động hoàn chỉnh cơ bản sử dụng PHP và AJAX. Nhớ đặt tất cả ba tệp (index.html, autocomplete.js, và get_suggestions.php) trong cùng một thư mục và mở index.html trong trình duyệt để xem ô tìm kiếm hoạt động.
Khi bạn tiếp tục hành trình lập trình của mình, bạn sẽ thấy rằng có nhiều cách để triển khai tính năng tự động hoàn chỉnh, chẳng hạn như sử dụng các khung công tác như React hoặc Angular, hoặc thậm chí sử dụng các thư viện frontend hiện đại như Vue.js hoặc Svelte. Nhưng cho đến nay, ví dụ đơn giản này nên cung cấp cho bạn một nền tảng vững chắc để xây dựng.
Chúc bạn lập trình vui vẻ!
Credits: Image by storyset