BS4 Filters
Bootstrap 4 Filters
There isn’t a filterable component in Bootstrap. Nevertheless, we may search for and filter components using jQuery.
Filter Tables
Conduct a search for elements in a table without regard to case:
Example
To search the table for first names, last names, or emails, enter text in the input field:
==== table 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>
An explanation of the example: To see if there are any text values that match the value entered in the input field, we utilize jQuery to loop through each row of the table. The row (display:none) that does not match the search is hidden using the toggle method. The text is converted to lower case using the toLowerCase() method, which makes the search case insensitive and accepts “john,” “John,” and even “JOHN”.
Filter Lists
Do the following to search a list of items without regard to case:
Example
==== table mukavu ====
Filter Anything
Conduct a search for text inside a div element without regard to case:
