Do you want to search from a list or a group of products to make your life a little easier? We can perform this action by using Bootstrap 4 filters.
Bootstrap 4 does not have any specific element with the name of filters that can perform this function. However, the addition of jQuery allows us to conduct this filtration.
We can conduct filtration on tables, lists, or anything using the Bootstrap 4 filters.
First, create a table, a list, or anything like a product’s grid to perform the practical implementation of the filters. Here, we'll create a sample table and implement jQuery on it.
headtag. We also start the
divwhich holds the search bar and product table in it.
h2to give a title. This can be optional, according to our needs.
myFilter. Inside the tag class, we use the
form-controlto make the search bar responsive and expand it to the entire page size.
headtag, then the
rowtag following the
columntag. These are the demo names that we can add according to our needs.
bodytag. Inside the tag, we define its ID as
productTable. This ID is used to define the point where we search the data.
Let's add code to search anything from the table shown above:
keyupfunction specifies when the user releases the key.
variablevalue that holds the new value after converting the typed value of the user to lowercase. Here, conversion of lowercase is done to perform a case-insensitive search.
Note: The table body is defined as the starting point of the search to avoid the header part being included in it.
toggleto hide the rows that are not entertained through the search query and
toLowerCaseto make the search case insensitive. The index of
-1means the records have no matching values. In the end, we close all the tags.
View all Courses