BBS5 Filters
Learn how to create filters with JavaScript and Bootstrap.
BS5 Filters
You can use Bootstrap classes along with a little JavaScript to create a filterable list or table.
This looks at the text inside items and hides those that don't match the search input.
Examples
Filter List
html/cssA simple search filter for a list group.
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<ul class="list-group" id="myList">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth</li>
</ul>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>