Bootstrap Filters (Advanced)
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
Bootstrap Filters (Advanced)
❮ Previous
Next ❯
Bootstrap Filters
Bootstrap does not have a component that allows filtering. However, we can use jQuery to filter / search for elements.
Filter Tables
Perform a case-insensitive search for items in a table:
Example
Type something in the input field to search the table for first names, last names or emails:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@mail.com |
| July | Dooley | july@greatstuff.com |
| Anja | Ravendale | a_r@test.com |
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle( $(this).text().toLowerCase().indexOf(value) > -1 );
});
});
});
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>Try it Yourself »
Example explained: We use jQuery to loop through each table
rows to check if there are any text values that matches the value of the input
field. The toggle method hides the row (display:none) that does not match the
search. We use the toLowerCase() method to convert the text to lower case, which
makes the search case insensitive (allows "john", "John", and even "JOHN" on
search).
Filter Lists
Perform a case-insensitive search for items in a list:
Example
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
$(document).ready(function(){
$("#myInputList").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList li").filter(function() {
$(this).toggle( $(this).text().toLowerCase().indexOf(value) > -1 );
});
});
});
Try it Yourself »
Filter Dropdowns
Perform a case-insensitive search for items in a dropdown menu:
Example
Open the dropdown menu and type something in the input field to search for dropdown items:
$(document).ready(function(){
$("#myInputDrop").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".dropdown-menu li").filter(function() {
$(this).toggle( $(this).text().toLowerCase().indexOf(value) > -1 );
});
});
});
Try it Yourself »
Filter Anything
Perform a case-insensitive search for text inside a div element:
Example
I am a paragraph.
Another paragraph.
$(document).ready(function(){
$("#myInputDiv").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myDIV *").filter(function() {
$(this).toggle( $(this).text().toLowerCase().indexOf(value) > -1 );
});
});
});
Try it Yourself »
❮ Previous
Next ❯