Giao diện tìm kiếm thông tin được sử dụng để cung cấp một cách thuận tiện và trực quan cho người dùng tìm kiếm thông tin trong hệ thống của bạn. Dưới đây là một số lợi ích chính của việc tạo giao diện tìm kiếm:
- Trải nghiệm người dùng tốt hơn: Giao diện tìm kiếm cung cấp một cách thuận tiện và trực quan cho người dùng nhập thông tin cần tìm kiếm.
- Tiết kiệm thời gian: Thay vì phải duyệt qua nhiều trang hoặc phải nhớ các câu lệnh tìm kiếm phức tạp, người dùng có thể dễ dàng nhập thông tin vào ô tìm kiếm và nhận kết quả ngay lập tức.
- Tăng tương tác: Giao diện tìm kiếm thúc đẩy tương tác giữa người dùng và hệ thống của bạn. Người dùng có thể tìm kiếm thông tin theo ý muốn mà không cần phải tuân theo cấu trúc cố định.
- Tùy chỉnh kết quả: Bằng cách sử dụng giao diện tìm kiếm, bạn có thể tạo các tùy chọn tìm kiếm nâng cao, cho phép người dùng lọc kết quả theo các tiêu chí cụ thể.
- Hiển thị kết quả dễ đọc: Khi có kết quả, giao diện tìm kiếm cho phép bạn hiển thị thông tin một cách dễ đọc và thuận tiện cho người dùng, như trong ví dụ trước đó khi chỉ hiển thị tiêu đề và nội dung vắn tắt của bài đăng.
Nội dung file tìm kiếm thông tin search.php có thể như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tìm kiếm bài đăng</title>
<style>
.container{width:1080px; margin:auto;}
#searchResults { list-style-type: none; padding: 0;}
.post {border: 1px solid #ccc;margin-bottom: 10px;padding: 10px;}
</style>
</head>
<body>
<div class="container">
<h1>Tìm kiếm bài đăng</h1>
<form method="GET">
<input type="text" name="query" placeholder="Nhập tên bài đăng...">
<button type="submit">Tìm kiếm</button>
</form>
<ul id="searchResults">
<?php
// Kết nối đến cơ sở dữ liệu
include "connection.php";
// Xử lý tìm kiếm nếu có
if(isset($_GET['query'])) {
$search_query = $_GET['query'];
$sql = "SELECT * FROM post WHERE title LIKE '%$search_query%'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// Hiển thị kết quả tìm kiếm
while($row = $result->fetch_assoc()) {
echo "<li class='post'><h2>".$row['title']."</h2><p>".truncateLen(strip_tags($row['content']), 100)."</p></li>";
}
} else {
echo "Không có kết quả phù hợp";
}
}
// Đóng kết nối
$conn->close();
// Hàm cắt chuỗi: Hiển thị số lượng ký tự ấn định, ví dụ 100 ký tự
function truncateLen($text, $maxLength) {
return strlen($text) > $maxLength ? substr($text, 0, $maxLength) . '...' : $text;
}
// Hàm cắt từ: Hiển thị số lượng từ tự ấn định, ví dụ 100 từ
function truncateWord($text, $maxWords) {
$words = explode(" ", $text);
$truncated = implode(" ", array_slice($words, 0, $maxWords));
if (count($words) > $maxWords) {
$truncated .= '...';
}
return $truncated;
}
?>
</ul>
</div>
</body>
</html>
Ở đây, hàm strip_tags() được sử dụng để loại bỏ các thẻ HTML từ nội dung bài đăng trước khi cắt chuỗi. Điều này đảm bảo chỉ có văn bản thuần túy được hiển thị trong nội dung vắn tắt.
Giao diện hiển thị tìm kiếm hiển thị theo ký tự có thể như sau:
Tìm kiếm bài đăng hiển thị theo từ:
//echo "<li class='post'><h2>".$row['title']."</h2><p>".truncateLen(strip_tags($row['content']), 100)."</p></li>";
echo "<li class='post'><h2>".$row['title']."</h2><p>".truncateWord(strip_tags($row['content']), 100)."</p></li>";Trong hàm truncateWord() (hàm này đã có trong code ở trên), chúng ta sử dụng explode() để chia nội dung thành các từ và sau đó sử dụng array_slice() để lấy 100 từ đầu tiên. Nếu số từ trong nội dung lớn hơn 100, chúng ta thêm dấu ba chấm (…) vào cuối chuỗi để chỉ ra sự cắt giảm.
Giao diện hiển thị tìm kiếm hiển thị theo từ có thể như sau:
Tóm lại, việc tạo giao diện tìm kiếm thông tin không chỉ giúp cải thiện trải nghiệm người dùng mà còn tăng khả năng tương tác và tùy chỉnh kết quả tìm kiếm (ví dụ bạn có thể bổ sung thêm nút Sửa, Xóa nội dung tìm kiếm).