Filter search đơn giản với datalist HTML

Thông thường để tạo một dropdown kèm filter search thì chúng ta hay sử dụng javascript/jquery để thêm sự kiện input/change rồi sau đó hiển thị giá trị phù hợp đúng không 😀. Hôm nay mình sẽ giới thiệu cách chúng ta sử dụng HTML để làm filter search nhé.

HTML cung cấp cho chúng ta một thẻ đó là <datalist>. thẻ này chứa các thẻ <option>. Đây là một ví dụ về cách sử dụng:

<label for="select-sach">Tìm kiếm sách thể loại: </label>
<input id="select-sach" list="sach" placeholder="Nhập thể loại..." />

<datalist id="sach">
    <option value="Kinh Doanh">
    <option value="Kỹ Năng">
    <option value="Tâm Lý">
    <option value="Y Học">
    <option value="Văn Học">
    <option value="Tiểu Thuyết">
    <option value="Tiểu Sử">
</datalist>

Kết quả:

Tìm kiếm sách thể loại:

Chúng ta cần liên kết <datalist> với <input> bằng cách sử dụng list của input với id của <datalist>, khi người dùng nhập giá trị, nó sẽ hiển thị giá trị recommend phù hợp.

<input> sẽ giữ <option> mà người dùng chọn, vì vậy chúng ta có thể sử dụng JavaScript để lấy giá trị đã chọn bằng cách:

const input = document.getElementById('select-sach');
console.log(input.value);

Sử dụng datalist khi nào?

Tùy thuộc vào từng trường hợp chúng ta có thể sử dụng thẻ này. Mình lấy ví dụ như chúng ta có rất nhiều các option lấy từ database. Vì số lượng option nhiều và chúng ta không muốn người dùng phải cuộn chuột để tìm kiếm thì datalist sẽ cho phép người dùng truy vấn nhanh hơn, thay vì kéo chuột tìm kiếm thì người dùng có thể nhập vào ô tìm kiếm để tìm ^^.

Như vậy là mình đã giới thiệu cho các bạn về thẻ datalist rồi. Thay vì chúng ta sử dụng javascript để làm điều tương tự thì tại sao chúng ta không dùng các thẻ có sẵn của html sẽ giúp chúng ta tiết kiệm thời gian hơn đúng không ^^.

Chúc các bạn học tốt.

Một số bài viết nên đọc:

1. &nbsp html là gì? cách tạo khoảng trắng trong html
2. picture tag trong HTML
3. Một số HTML attribute hay bạn nên biết