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 các liên kết bằng JavaScript.
Menu Tìm kiếm / Lọc
Cách tìm kiếm các 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ể bên trong 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 Menu Tìm kiếm
Bước 1) Thêm HTML:
Thí 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 trình diễn này vì chúng tôi không có trang để liên kết đến. Trong cuộc sống thực, đây phải là một URL thực đến 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:
Thí 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:
Thí 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>
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: Cũng xem Cách lọc bảng .
Mẹo: Ngoài ra, hãy xem Cách Lọc Danh sách .