Giống như Bootstrap 3 trong Bootstrap 4 cũng không có thành phần cho phép lọc riêng. Thế nhưng chúng ta có thể sử dụng jQuery để lọc hoặc tìm kiếm các phần tử. Trong bài học này chúng ta sẽ tìm hiểu về các lọc (Filter) tùy chọn trong Bootstrap 4 các bạn nhé!
Lọc Bảng (Filter Tables)
Thực hiện tìm kiếm không phân biệt chữ hoa chữ thường cho các mục trong bảng:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Filterable Table</h2> <p>Nhập một cái gì đó vào trường nhập liệu để tìm kiếm tên, họ hoặc email trong bảng:</p> <input class="form-control" id="myInput" type="text" placeholder="Search.."> <br> <table class="table table-bordered"> <thead> <tr> <th>Tên</th> <th>Họ</th> <th>Email</th> </tr> </thead> <tbody id="myTable"> <tr> <td>Tiệp</td> <td>Hoàng</td> <td>ht@ht.vn</td> </tr> <tr> <td>Hòa</td> <td>NGuyễn</td> <td>nguyenhoa@gmail.com</td> </tr> <tr> <td>Tân</td> <td>Đặng</td> <td>tancute@gmail.com</td> </tr> <tr> <td>Thanh</td> <td>Hoàng</td> <td>hoangthanh@gmail.com</td> </tr> </tbody> </table> <p>Nhập một cái gì đó vào trường nhập liệu để tìm kiếm tên, họ hoặc email trong bảng:</p> </div> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> </body> </html>
Giải thích ví dụ:
- jQuery được sử dụng để lặp qua từng hàng của bảng để kiểm tra xem có bất kỳ giá trị văn bản nào khớp với giá trị của trường đầu vào hay không.
- Phương thức toggle () ẩn hàng (display: none) không khớp với giá trị tìm kiếm.
- PHương thức toLowerCase () để chuyển đổi văn bản thành chữ thường, điều này làm cho tìm kiếm không phân biệt chữ hoa chữ thường (cho phép "Hòa", "Hòa" và thậm chí "HÒA" trên tìm kiếm).
Lọc danh sách (Filter Lists)
Thực hiện tìm kiếm không phân biệt chữ hoa chữ thường cho các mục trong danh sách:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Lọc Danh Sách</h2> <input class="form-control" id="myInput" type="text" placeholder="Search.."> <br> <ul class="list-group" id="myList"> <li class="list-group-item">Phần 1</li> <li class="list-group-item">Phần 2</li> <li class="list-group-item">Phần 3</li> <li class="list-group-item">Phần 4</li> </ul> </div> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myList li").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> </body> </html>
Lọc bất cứ thứ gì (Filter Anything)
Thực hiện tìm kiếm không phân biệt chữ hoa chữ thường đối với văn bản bên trong phần tử div:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Lọc bất cứ thứ gì</h2> <p>Nhập nội dung nào đó vào trường nhập để tìm kiếm văn bản cụ thể bên trong phần tử div với id = "myDIV":</p> <input class="form-control" id="myInput" type="text" placeholder="Search.."> <div id="myDIV" class="mt-3"> <p>Sao bao nhiêu mối tình đổ vỡ</p> <div>Mình còn tin ai.</div> <button class="btn">Sau bao nhiêu tổn thương bủa vây</button> <button class="btn btn-info">Vẫn yêu em rất miệt mài</button> <p>Sau bao nhiêu khoảng khắc tường chừng hạnh phúc nhất. Phút chốc tan vỡ thật nhanh anh ngỡ</p> <div>Tình yêu đẹp nhất cũng tàn thôi.</div> <p>Phải chi ngày đó mình đừng yêu nhau, thì hai chúng ta vẫn như lúc đầu. Hạnh phúc là khi vì nhau vượt qua muôn ngàn nỗi đau</p> </div> </div> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myDIV *").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> </body> </html>
Lời kết:
Trên đây là cách lọc dữ liệu trên Bootstrap 4. Hi vọng bài viết này giúp ích được cho các bạn. Chúc các bạn thành công với Bootstrap 4.
