Cách tạo một thanh tìm kiếm đơn giản bằng danh sách các chuỗi trong JavaScript
Xây dựng thanh tìm kiếm tự động hoàn thành của riêng bạn dễ dàng hơn bạn nghĩ.
Thanh tìm kiếm là một phần tử giao diện người dùng phổ biến mà nhiều trang web hiện đại sử dụng. Nếu bạn đang xây dựng một trang web chứa bất kỳ loại dữ liệu nào, bạn có thể muốn người dùng của mình có thể tìm kiếm các mục cụ thể.
Có nhiều cách bạn có thể xây dựng một thanh tìm kiếm. Bạn có thể tạo các thanh tìm kiếm phức tạp trả về kết quả dựa trên nhiều bộ lọc, chẳng hạn như tên hoặc ngày. Các thư viện hiện có có thể giúp bạn triển khai thanh tìm kiếm mà không cần xây dựng từ đầu.
Tuy nhiên, bạn cũng có thể tạo một thanh tìm kiếm đơn giản bằng cách sử dụng vanilla JavaScript để so sánh đầu vào của người dùng với danh sách các chuỗi.
Mục Lục
Cách thêm giao diện người dùng cho thanh tìm kiếm
Trang web của bạn nên bao gồm một hộp nhập liệu để người dùng của bạn nhập văn bản mà họ muốn tìm kiếm. Một cách để thực hiện việc này là sử dụng thẻ đầu vào và tạo kiểu cho nó trông giống như một thanh tìm kiếm.
- Tạo một thư mục để lưu trữ trang web của bạn. Trong thư mục, tạo một tệp HTML có tên index.html.
- Điền vào tệp của bạn với cấu trúc cơ bản của tài liệu HTML. Nếu bạn không quen thuộc với HTML, có rất nhiều ví dụ về mã HTML mà bạn có thể tìm hiểu để giúp bạn bắt kịp tốc độ.
<!doctype html>
<html lang="en-US">
<head>
<title>Searchbar</title>
</head>
<body>
<div class="container">
<!-- Webpage content goes here-->
</div>
</body>
</html> - Bên trong div của lớp vùng chứa, hãy thêm thẻ đầu vào. Điều này sẽ cho phép người dùng nhập văn bản mà họ muốn tìm kiếm. Bất cứ khi nào họ nhập một ký tự mới, trang web của bạn sẽ gọi hàm search(). Bạn sẽ tạo chức năng này trong các bước sau.
<div class="container">
<h2>Search Countries</h2>
<input id="searchbar" autocomplete="off" onkeyup="search()" type="text"
name="search" placeholder="What are you looking for?">
</div>Thuộc tính tự động hoàn thành đảm bảo trình duyệt sẽ không thêm danh sách thả xuống của chính nó dựa trên các cụm từ tìm kiếm trước đó.
- Trong cùng thư mục với bạn index.html tệp, hãy tạo một tệp CSS mới có tên phong cách.css.
- Điền vào tệp với kiểu dáng cho toàn bộ trang web và thanh tìm kiếm:
body {
margin: 0;
padding: 0;
background-color:
}
* {
font-family: "Arial", sans-serif;
}
.container {
padding: 100px 25%;
display: flex;
flex-direction: column;
line-height: 2rem;
font-size: 1.2em;
color:
}
padding: 15px;
border-radius: 5px;
}
input[type=text] {
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
} - Trong index.htmlhãy thêm liên kết tới tệp CSS của bạn bên trong thẻ đầu và bên dưới thẻ tiêu đề:
<link rel="stylesheet" href="styles.css"> - Mở index.html tệp trong trình duyệt web và xem giao diện người dùng của thanh tìm kiếm của bạn.
Cách tạo chuỗi danh sách cho thanh tìm kiếm
Trước khi người dùng có thể tìm kiếm, bạn cần tạo một danh sách các mục có sẵn mà họ có thể tìm kiếm. Bạn có thể làm điều này với một chuỗi các chuỗi. Chuỗi là một trong nhiều loại dữ liệu bạn có thể sử dụng trong JavaScript và có thể biểu thị một chuỗi ký tự.
Bạn có thể tự động tạo danh sách này bằng JavaScript khi trang đang tải.
- Nội bộ index.html, bên dưới thẻ đầu vào, hãy thêm div. Div này sẽ hiển thị danh sách thả xuống chứa danh sách các mục phù hợp với những gì người dùng đang tìm kiếm:
<div id="list"></div> - Trong cùng thư mục với bạn index.html tập tin và phong cách.css tệp, tạo một tệp mới có tên script.js.
- Nội bộ script.js, hãy tạo một hàm mới gọi là loadSearchData(). Bên trong hàm, khởi tạo một mảng với một danh sách các chuỗi. Hãy nhớ rằng đây là một danh sách tĩnh nhỏ. Việc triển khai phức tạp hơn sẽ phải tính đến việc tìm kiếm thông qua các bộ dữ liệu lớn hơn.
function loadSearchData() {
let countries = [
'Australia',
'Austria',
'Brazil',
'Canada',
'Denmark',
'Egypt',
'France',
'Germany',
'USA',
'Vietnam'
];
} - Bên trong loadSearchData() và bên dưới mảng mới, lấy phần tử div sẽ hiển thị các mục tìm kiếm phù hợp cho người dùng. Bên trong div danh sách, hãy thêm thẻ neo cho từng mục dữ liệu trong danh sách:
let list = document.getElementById('list');
countries.forEach((country)=>{
let a = document.createElement("a");
a.innerText = country;
a.classList.add("listItem");
list.appendChild(a);
}) - Trong thẻ body của index.html, hãy thêm thuộc tính sự kiện onload để gọi hàm loadSearchData() mới. Thao tác này sẽ tải dữ liệu khi trang đang tải.
<body onload="loadSearchData()"> - Trong index.htmltrước khi thẻ body kết thúc, hãy thêm thẻ script để liên kết tới tệp JavaScript của bạn:
<body onload="loadSearchData()">
<!-- Your webpage content -->
<script src="script.js"></script>
</body> - Trong phong cách.csshãy thêm một số kiểu dáng vào danh sách thả xuống:
border: 1px solid lightgrey;
border-radius: 5px;
display: block;
}
.listItem {
display: flex;
flex-direction: column;
text-decoration: none;
padding: 5px 20px;
color: black;
}
.listItem:hover {
background-color: lightgrey;
} - Mở index.html trong một trình duyệt web để xem thanh tìm kiếm của bạn và danh sách các kết quả tìm kiếm có sẵn. Chức năng tìm kiếm chưa hoạt động, nhưng bạn sẽ thấy giao diện người dùng mà nó sẽ sử dụng:
Cách tạo danh sách thả xuống với kết quả phù hợp trong thanh tìm kiếm
Bây giờ bạn đã có một thanh tìm kiếm và một danh sách các chuỗi để người dùng tìm kiếm, bạn có thể thêm chức năng tìm kiếm. Khi người dùng nhập vào thanh tìm kiếm, chỉ một số mục nhất định trong danh sách sẽ hiển thị.
- Trong phong cách.csshãy thay thế kiểu dáng cho danh sách để ẩn danh sách theo mặc định:
border: 1px solid lightgrey;
border-radius: 5px;
display: none;
} - Trong script.js, hãy tạo một chức năng mới gọi là tìm kiếm(). Hãy nhớ rằng chương trình sẽ gọi chức năng này mỗi khi người dùng nhập hoặc xóa một ký tự khỏi thanh tìm kiếm. Một số ứng dụng sẽ cần các chuyến đi đến máy chủ để lấy thông tin. Trong những trường hợp như vậy, việc triển khai này có thể làm chậm giao diện người dùng của bạn. Bạn có thể cần phải sửa đổi việc triển khai để tính đến điều này.
function search() {
} - Bên trong hàm search(), lấy phần tử HTML div cho danh sách. Ngoài ra, hãy lấy các phần tử thẻ neo HTML của từng mục trong danh sách:
let listContainer = document.getElementById('list');
let listItems = document.getElementsByClassName('listItem'); - Nhận đầu vào mà người dùng đã nhập vào thanh tìm kiếm:
let input = document.getElementById('searchbar').value
input = input.toLowerCase(); - So sánh đầu vào của người dùng với từng mục trong danh sách. Ví dụ: nếu người dùng nhập “a”, hàm sẽ so sánh nếu “a” nằm trong “Úc”, sau đó là “Áo”, “Brazil”, “Canada”, v.v. Nếu khớp sẽ hiển thị mục đó trong danh sách. Nếu không khớp sẽ ẩn mục đó đi.
let noResults = true;
for (i = 0; i < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes(input) || input === "") {
listItems[i].style.display="none";
continue;
}
else {
listItems[i].style.display="flex";
noResults = false;
}
} - Nếu không có kết quả nào trong danh sách, hãy ẩn danh sách hoàn toàn:
listContainer.style.display = noResults ? "none" : "block"; - bấm vào index.html tập tin để mở nó trong một trình duyệt web.
- Bắt đầu nhập vào thanh tìm kiếm. Khi bạn nhập, danh sách kết quả sẽ cập nhật để chỉ hiển thị các kết quả phù hợp.
Sử dụng Thanh tìm kiếm để tìm kiếm kết quả phù hợp
Bây giờ bạn đã biết cách tạo thanh tìm kiếm với lựa chọn chuỗi, bạn có thể thêm nhiều chức năng hơn.
Chẳng hạn, bạn có thể thêm liên kết vào thẻ neo của mình để mở các trang khác nhau tùy thuộc vào kết quả mà người dùng nhấp vào. Bạn có thể thay đổi thanh tìm kiếm của mình để tìm kiếm thông qua các đối tượng phức tạp hơn. Bạn cũng có thể sửa đổi mã để hoạt động với các khung như React.