thực hành - Tìm kiếm trong danh sách

Trong bài thực hành này, chúng ta sẽ tìm hiểu cách tạo một thanh Search có chức năng tìm kiếm nội dung trong danh sách bằng HTML, CSS và JavaScript.

Tìm kiếm trong danh sách

Nhập nội dung cần tìm trong danh sách vào trường input.

Xem kết quả

Cách làm tìm kiếm trong danh sách

Bước 1) Thêm HTML:

Ví dụ

<input type="text" id="myInput" placeholder="Search for name ..." />
<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="#">Calvil</a></li>
    <li><a href="#">Christyna</a></li>
    <li><a href="#">Cindy</a></li>
</ul>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho thẻ input */
#myInput {
    display:block;
    width:100%;
    border:1px solid #ccc;
    padding:12px 0;
    padding-left:30px;
    background-image:url('/images/searchicon.png');
    background-repeat:no-repeat;
    background-position:6px;    
}
/* Tạo kiểu cho phần tử ul */
#myUL {
    list-style:none;
    margin:0;
    margin-top:20px;
    padding:0;
}
/* Tạo kiểu cho phần tử a */
#myUL li a {
    text-decoration:none;
    color:black;
    display:block;
    width:100%;
    padding:12px 16px;
    background-color:#f1f1f1;    
    border:1px solid #ccc;
    margin-top:-1px;
}
/* Thêm hiệu ứng khi hover */
#myUL li a:hover {
    background-color:#ccc;
    color:white;    
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>

// Khai báo các biến
var a, b, c, d, i;
a = document.getElementById('myInput');

// Gán sự kiện keyup cho phần tử input
a.onkeyup = function() {
    val = this.value;
    b = document.getElementById('myUL');
    c = b.getElementsByTagName("li");
    for (i = 0; i < c.length; i++) {
        d = c[i].getElementsByTagName("a")[0];
        j = d.textContent || d.innerText;
        if(j.toUpperCase().indexOf(val.toUpperCase()) > -1) {
            c[i].style.display = "";
        }else{
            c[i].style.display = "none";    
        }
    }    
}
</script>