Filters are necessary to narrow down the data based on the required criteria.
It helps in searching data with the use of some string or other identifying variables.
A filter does not select the data for you, only provides you the most relatable option based on the criteria you set.
Bootstrap does not have a separate filtering component, but with the use of jQuery, we can design a mechanism to search for elements on the web pages.
Filter Tables
You can apply filters table data on your web-pages.
This is useful when the data is in tabular format (like a food menu with food name, picture, and price) and you can add the filter to select the desired data.
The below code illustrates the use of a jQuery filter for performing a case-insensitive search for items in a table:
1 2 3 4 5 6 7 8 9 10 | <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> |
Here’s the explanation for what just happened:
- As mentioned earlier, we have used jQuery in the above code.
- Now, here we are, basically, looping through all the rows in the table to search for the input text
- We have used the toggle() method here. This ensures that the all the rows that do not match the input text are hidden (i.e. display: the none)
- Another important method used here is the toLowerCase() method. As mentioned beforehand, this is a case-insensitive search. Therefore, all the input text is converted into the
lower case making ‘VALUE’, ‘Value’ and ‘value’ same for the input search.
Filter Lists
Another element where a search or narrowing down of data might be needed is a list.
Here’s the code to perform the same case-insensitive search for items in a list:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div class="container"> <h2>Filterable List</h2> <p>Search for required data in the list by typing something in the input field:</p> <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> </div> <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> |
Filter Dropdowns
Sometimes, the list of selectable options in the dropdowns other identifying variables too long to choose from.
Most often, this happens when you have
Therefore, simple code like below can help you create a filterable dropdown.
Here again, we are web pages case-insensitive search so that you can understand the example better:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <div class="container"> <h2>Filterable Dropdown</h2> <p>Open the dropdown menu and type something in the input field to search for dropdown items:</p> <p>The input field is properly styled to fit the dropdown items.</p> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span></button> <ul class="dropdown-menu"> <input class="form-control" id="myInput" type="text" placeholder="Search.."> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Bootstrap</a></li> <li><a href="#">Angular</a></li> </ul> </div> </div> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $(".dropdown-menu li").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> |