Bs Filters

Bootstrap Filters (Advanced)

---

Bootstrap Filters

Bootstrap does non convey a ingredient that allows filtering. However, nosotros tin ship away utilization jQuery to filter / search for elements.

---

Filter Tables

Perform a case-insensitive search for items inwards a table:

Example

Type something inwards the input land to search the tabular array for outset names, terminal names or emails:

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@mail.com
July	Dooley	july@greatstuff.com
Anja	Ravendale	a_r@test.com

jQuery

<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>

Example explained: We utilization jQuery to loop through each tabular array rows to cheque if at that topographic point are whatever text values that matches the value of the input field. The toggle method hides the row (display:none) that does non gibe the search. We utilization the toLowerCase() method to convert the text to lower case, which makes the search instance insensitive (allows "john", "John", too fifty-fifty "JOHN" on search).

---

Filter Lists

Perform a case-insensitive search for items inwards a list:

Example

Type something inwards the input land to search the listing for items:

• First item
• Second item
• Third item
• Fourth

---

Filter Dropdowns

Perform a case-insensitive search for items inwards a dropdown menu:

Example

Open the dropdown bill of fare too type something inwards the input land to search for dropdown items:

---

Filter Anything

Perform a case-insensitive search for text within a div element:

Example

I am a paragraph.

I am a div chemical element within div.

Another paragraph.

---