LÀM THẾ NÀO ĐỂ - Lọc / Danh sách Tìm kiếm
Tìm hiểu cách tạo danh sách bộ lọc bằng JavaScript.
Danh sách bộ lọc
Cách sử dụng JavaScript để tìm kiếm các mục trong danh sách.
Tạo danh sách tìm kiếm
Bước 1) Thêm HTML:
Thí dụ
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search
for names..">
<ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</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 phần tử đầu vào và danh sách:
Thí dụ
#myInput {
background-image: url('/css/searchicon.png');
/* Add a search icon to input */
background-position:
10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /*
Increase font-size */
padding: 12px 20px 12px 40px; /*
Add some padding */
border: 1px solid #ddd; /* Add a
grey border */
margin-bottom: 12px; /* Add some space
below the input */
}
#myUL {
/* Remove default list styling */
list-style-type:
none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd; /* Add a border to all links */
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6; /* Grey background color */
padding: 12px; /* Add some padding */
text-decoration:
none; /* Remove default text underline */
font-size:
18px; /* Increase the font-size */
color: black; /*
Add a black text color */
display: block; /* Make it
into a block element to fill the whole list */
}
#myUL
li a:hover:not(.header) {
background-color: #eee; /*
Add a hover effect to all links, except for headers */
}
Bước 3) Thêm JavaScript:
Thí dụ
<script>
function myFunction() {
// Declare variables
var input, filter,
ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul =
document.getElementById("myUL");
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];
txtValue = a.textContent || a.innerText;
if (txtValue.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 Bảng Bộ lọc .