Topic: A responsive Bootstrap Search Box that really searches
There are plenty of search box examples on the Internet, but all of them are actually static components that don't perform their crucial action - searching.
In this simple and short tutorial, I'll show you how to achieve the desired result and how to create a fully functional search box, that really searches.
Note: If you want to learn more about the basics of Bootstrap Search have a look at our Search Docs.
In this tutorial, I will use Bootstrap 5 which is the newest version of the Bootstrap.
I will also use a free UI KIT Material Design for Bootstrap, to apply Material Design look to the project.
Go to the installation page and download Material Design for Bootstrap. It's free, MIT licensed and you can freely use it in any projects - also commercial.
Unzip the package and open it in your favorite code editor. I recommend Visual Studio Code together with our extension VSC code snippets for MDB.
I am adding a simple grid to provide a proper margin and card inside of the grid. This step is not strictly related to the search box and it's used only to improve the visual effect of this small project.
It's fully optional and you can skip this step if you care only about search functionality.
From the Search Docs copy the example of the Search with Icon.
I am also adding
.mb-4 class to the
.input-group element to provide some margin-bottom and make a space between the search box and the list of items that we will place below.
Let's add a list of items that we will search through.
From the List Group Docs copy the basic example. Then place a link inside each of the
li elements with a car brand inside.
We get the search box through an ID and add a keyup event which will trigger the function every time the user type anything in the search input.
Now we declare necessary variables and assign values to them.
Add the end we create
for Loop to loop through all list items, and hide those who don't match the search query.
That's it. Our search functionality is ready.
See the final result and source code by clicking the button below.DEMO & SOURCE CODE
If you need more advanced search functionalities read our Search Docs.SEARCH DOCS
- Category: Miscellaneous
- Specification: MDB 5