Làm thế nào để thực hiện - Tìm kiếm / Lọc thả xuống
Tìm hiểu cách tìm kiếm các mục trong menu thả xuống bằng CSS và JavaScript.
Trình đơn thả xuống bộ lọc
Tạo một menu thả xuống có thể nhấp
Tạo menu thả xuống xuất hiện khi người dùng nhấp vào nút.
Bước 1) Thêm HTML:
Thí dụ
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input
type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<a href="#about">About</a>
<a href="#base">Base</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
<a href="#custom">Custom</a>
<a href="#support">Support</a>
<a href="#tools">Tools</a>
</div>
</div>
Giải thích ví dụ
Sử dụng bất kỳ phần tử nào để mở menu thả xuống, ví dụ: phần tử <button>, <a> hoặc <p>.
Sử dụng phần tử vùng chứa (như <div>) để tạo menu thả xuống và thêm các liên kết thả xuống bên trong nó.
Quấn phần tử <div> xung quanh nút và <div> để định vị trình đơn thả xuống một cách chính xác với CSS.
Bước 2) Thêm CSS:
Thí dụ
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown
button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The search field */
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border:
none;
border-bottom: 1px solid #ddd;
}
/* The search field
when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}
/* The
container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display:
inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position:
absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content
container when the user clicks on the dropdown button) */
.show {display:block;}
Giải thích ví dụ
Chúng tôi đã tạo kiểu cho nút thả xuống bằng màu nền, phần đệm, hiệu ứng di chuột, v.v.
Lớp .dropdown
sử dụng position:relative
, cần thiết khi chúng ta muốn nội dung thả xuống được đặt ngay bên dưới nút thả xuống (đang sử dụng position:absolute
).
Lớp .dropdown-content
giữ menu thả xuống thực tế. Nó bị ẩn theo mặc định và sẽ được hiển thị khi di chuột (xem bên dưới). Lưu ý rằng min-width
được đặt thành 230px. Hãy thay đổi điều này. Mẹo: Nếu bạn muốn chiều rộng của nội dung thả xuống rộng bằng nút thả xuống, hãy đặt thành width
100% (và overflow:auto
cho phép cuộn trên màn hình nhỏ).
Trường tìm kiếm (#myInput) được tạo kiểu để vừa với bên trong menu thả xuống. Chúng tôi đã thêm một biểu tượng tìm kiếm, được đặt ở bên trái bên trong trường tìm kiếm để cho biết rằng đây thực sự là một trường tìm kiếm.
Bước 3) Thêm JavaScript:
Thí dụ
/* When the user clicks on the button,
toggle between hiding and showing
the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter =
input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
Mẹo: Đi tới Hướng dẫn CSS thả xuống của chúng tôi để tìm hiểu thêm về trình đơn thả xuống.
Mẹo: Đi tới Danh sách thả xuống có thể lưu trữ của chúng tôi để tìm hiểu thêm về danh sách thả xuống có thể lưu trữ