IMG-LOGO
× 01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap




Trang Chủ Học Bootstrap Bootstrap 4 Filters (Advanced)

Bootstrap 4 Filters (Advanced)

by GokiSoft.Com - 19:25 12/10/2020 2,844 Lượt Xem

Bootstrap 4 Filters

Bootstrap không có thành phần cho phép lọc. Tuy nhiên, ta có thể sử dụng jQuery để lọc / tìm kiếm.


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:

Ví dụ

<div class="container mt-3">
  <h2>Filterable Table</h2>
  <p>Type something in the input field to search the table for first names, last names or emails:</p>  
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody id="myTable">
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Anja</td>
        <td>Ravendale</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
  
  <p>Note that we start the search in tbody, to prevent filtering the table headers.</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>

Giải thích ví dụ: Sử dụng jQuery để lặp qua từng hàng của bảng để kiểm tra nếu có bất kỳ giá trị văn bản nào khớp với giá trị của trường input. Phương thức toggle để hide row (display:none) mà không phù hợp với tìm kiếm. Chúng ta sử dụng toLowerCase() để chuyển đổi văn bản sang chữ thường, làm cho tìm kiếm của chúng ta case insensitive (Không phân biệt HOA thường).


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:

Ví dụ

<div class="container mt-3">
  <h2>Filterable List</h2>
  <p>Type something in the input field to search the list for specific items:</p>  
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <ul class="list-group" id="myList">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth</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>


Filter Anything

Thực hiện tìm kiếm không phân biệt chữ hoa chữ thường trong phần tử div:

Ví dụ

<div class="container mt-3">
  <h2>Filter Anything</h2>
  <p>Type something in the input field to search for a specific text inside the div element with id="myDIV":</p>
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <div id="myDIV" class="mt-3">
    <p>I am a paragraph.</p>
    <div>I am a div element inside div.</div>
    <button class="btn">I am a button</button>
    <button class="btn btn-info">Another button</button>
    <p>Another paragraph.</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>

Bình luận



Chia sẻ từ lớp học

Đã sao chép!!!