BS Filters
Bootstrap Filters
The Bootstrap framework lacks a filtering component. However, we may utilize jQuery to filter and search for elements.
Filter Tables
Conduct a case-insensitive search for elements in a table.
Example
Type something in the input field to search the table for first names, last names or emails:
------ Example MUKAVU ------
jQuery
<script>window.addEventListener('DOMContentLoaded', function() {
$(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 use jQuery to loop through each table row and see whether any text values match the value of the input field. The toggle() method conceals any rows (display:none) that do not match the search. We change the text to lower case using the toLowerCase() function, making the search case insensitive (search permits “john”, “John”, and even “JOHN”).
Filter Lists
Conduct a case-insensitive search for items in a list.
Example
------ Example MUKAVU ------
Filter Dropdowns
Use a case-insensitive search for items in a dropdown menu.
Example
------ Example MUKAVU ------
Filter Anything
Use a case-insensitive search for text within a div element:
