IMG-LOGO
Trang Chủ Chủ Đề Bootstrap 4 Filters (Advanced)
× 1) Bootstrap 4 - Giới Thiệu 2) Bootstrap 4 Containers 3) Bootstrap 4 Grids 4) Bootstrap 4 Text/Typography 5) Bootstrap 4 Colors 6) Bootstrap 4 Tables 7) Bootstrap 4 Images 8) Bootstrap 4 Jumbotron 9) Bootstrap 4 Alerts 10) Bootstrap 4 Buttons 11) Bootstrap 4 Button Groups 12) Bootstrap 4 Badges 13) Bootstrap 4 Progress Bars 14) Bootstrap 4 Spinners 15) Bootstrap 4 Pagination 16) Bootstrap 4 List Groups 17) Bootstrap 4 Cards 18) Bootstrap 4 Dropdowns 19) Bootstrap 4 Collapse 20) Bootstrap 4 Navs 21) Bootstrap 4 Navigation Bar 22) Bootstrap 4 Forms 23) Bootstrap 4 Form Inputs 24) Bootstrap 4 Inputs Group 25) Bootstrap 4 Custom Forms 26) Bootstrap 4 Carousel 27) Bootstrap 4 Modal 28) Bootstrap 4 Tooltip 29) Bootstrap 4 Popover 30) Bootstrap 4 Toast 31) Bootstrap 4 Scrollspy (Advanced) 32) Bootstrap 4 Utilities 33) Bootstrap 4 Flex 34) Bootstrap 4 Icons 35) Bootstrap 4 Media Objects 36. Bootstrap 4 Filters (Advanced) 37) Bootstrap 4 - Form đăng ký tài khoản người dùng

Bootstrap 4 Filters (Advanced)

by GokiSoft.Com - 21:57 13/05/2020 1,273 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>

Theo dõi cập nhật nội dung học trên Youtube


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Quick Quizzz!!!

User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User Image
User ImageUser ImageUser Image
>> Hiển Thị Quizzz
Đã sao chép!!!