Bootstrap Filters

Bootstrap Filters (Advanced)

Filters help users find specific content easily. Bootstrap doesn’t have built-in filters, but you can create them using HTML, CSS, and jQuery.

Filter Tables

Use an input box to filter table rows based on keywords.

<input id="myInput" type="text" placeholder="Search...">
<table id="myTable">
  <tr><td>HTML</td></tr>
  <tr><td>CSS</td></tr>
  <tr><td>JavaScript</td></tr>
</table>

$("#myInput").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#myTable tr").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

Filter Lists

<ul id="myList">
  <li>HTML</li>
  <li>Bootstrap</li>
  <li>JavaScript</li>
</ul>

Filter Dropdowns

$('#dropdownSearch').on('keyup', function() {
  var value = $(this).val().toLowerCase();
  $('#dropdownMenu option').filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

Filter Anything

$('.filter-input').on('keyup', function() {
  var value = $(this).val().toLowerCase();
  $('.filter-item').filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

Important Notes

Use keyup() and filter() for dynamic filtering.
Use toLowerCase() to make case-insensitive filters.
Filters enhance user experience by showing only what’s needed.

Request more information

Bootstrap Filters