thực hành - search menu thả xuống

Trong bài thực hành này, chúng ta sẽ tìm hiểu chức năng tìm kiếm nội dung trong menu thả xuống bằng HTML, CSS và JavaScript.

Search menu thả xuống

Click vào nút button để ẩn/ hiện menu thả xuống, nhập giá trị bất kỳ vào thanh search bar để tìm kiếm.

Xem kết quả

Cách tạo search menu thả xuống

Bước 1) Thêm HTML:

Ví dụ

<div class="myContainer">
    <button type="button" class="myBtn">Dropdown <i class="fa fa-caret-down"></i></button>
    <div class="dropDown">
        <input type="text" id="myInput" placeholder="Search ..." />
        <div class="dropMenu">
            <a href="#">About</a>
            <a href="#">Base</a>
            <a href="#">Blog</a>
            <a href="#">Contact</a>
            <a href="#">Custom</a>
            <a href="#">Support</a>
            <a href="#">Tools</a>
        </div>
    </div>
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho nút button */
.myBtn {
    border:none;
    outline:none;
    padding:10px 15px;
    background-color:dodgerblue;
    color:white;
    cursor:pointer;    
    user-select:none;
}
/* Thêm hiệu ứng khi hover */
.myBtn:hover {
    background-color:orange;    
}
/* Tạo kei63 cho lớp dropdown */
.dropDown {
    width:300px;
    min-width:250px;
    border:1px solid #ccc;    
    display:block;
    background-color:#f1f1f1;
    z-index:999;
}
/* Tạo kiểu cho phần tử input */
.dropDown > input {
    border:none;
    border-bottom:1px solid #ccc;
    padding:10px 0;
    padding-left:32px;    
    width:100%;
    background-image:url(/images/searchicon.png);
    background-repeat:no-repeat;
    background-position:8px;
}
/* Tạo kiểu cho các liên kết a */
.dropDown > .dropMenu > a {
    text-decoration:none;
    color:black;
    display:block;
    padding:10px 15px;
    width:100%;    
}
/* Thêm hiệu ứng khi hover */
.dropDown > .dropMenu > a:hover {
    background-color:#ccc;    
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>
searchMenu();

// Chuyển đổi ẩn/ hiện menu dropdown khi người dung click chuột
var myBtn, dropDown;
myBtn = document.getElementsByClassName('myBtn')[0];
dropDown = document.getElementsByClassName('dropDown')[0];
myBtn.onclick = function() {
    if(dropDown.style.display == "none") {
        dropDown.style.display = "block";
    }else{
        dropDown.style.display = "none";    
    }    
}

// Định nghĩa hàm lọc menu theo giá trị nhập vào
function searchMenu() {
    var myInput, val, dropMenu, a, i, text;
    myInput = document.getElementById('myInput');
    myInput.onkeyup = function() {
        val = this.value.toLowerCase();
        dropMenu = document.getElementsByClassName('dropMenu')[0];
        a = dropMenu.getElementsByTagName("a");
        for(i = 0; i < a.length; i++) {
            text = a[i].innerText.toLowerCase();
            if(text.indexOf(val) > -1) {
                a[i].style.display = "";
            }else{
                a[i].style.display = "none";    
            }
        }    
    }    
}
</script>