Cách thực hiện - Menu tìm kiếm
Tìm hiểu cách tạo menu tìm kiếm để lọc liên kết bằng JavaScript.
Menu Tìm kiếm/Bộ lọc
Cách tìm kiếm liên kết trong menu điều hướng:
Nội dung trang
Bắt đầu nhập danh mục/liên kết cụ thể vào thanh tìm kiếm để "lọc" các tùy chọn tìm kiếm.
Một số văn bản..Một số văn bản..Một số văn bản..Một số văn bản..Một số văn bản..Một số văn bản..Một số văn bản..Một số văn bản..
Một số văn bản khác..Một số văn bản..Một số văn bản..Một số văn bản..Một số văn bản..Một số văn bản..Một số văn bản..Một số văn bản..
Một số tiếp theo..
Tạo một menu tìm kiếm
Bước 1) Thêm HTML:
Ví dụ
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.."
title="Type in a category">
<ul id="myMenu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Node.js</a></li>
</ul>
Lưu ý: Chúng tôi sử dụng href="#" trong bản demo này vì chúng tôi không có trang nào để liên kết nó. Trong thực tế, đây phải là một URL thực tới một trang cụ thể.
Bước 2) Thêm CSS:
Tạo kiểu cho hộp tìm kiếm và menu điều hướng:
Ví dụ
/* Style the search box */
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
/* Style the navigation
menu */
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Style the navigation links */
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: block
}
#myMenu li a:hover {
background-color: #eee;
}
Bước 3) Thêm JavaScript:
Ví dụ
<script>
function myFunction() {
// Declare variables
var input, filter,
ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul =
document.getElementById("myMenu");
li =
ul.getElementsByTagName("li");
// Loop through all
list items, and hide those who don't match the search query
for (i = 0; i <
li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
}
else {
li[i].style.display = "none";
}
}
}
</script>
Hãy tự mình thử »Mẹo: Xóa toUpperCase() nếu bạn muốn thực hiện tìm kiếm phân biệt chữ hoa chữ thường.
Mẹo: Ngoài ra, hãy xem Cách lọc bảng .
Mẹo: Ngoài ra, hãy xem Cách lọc danh sách .