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.
The search functionality will be written in plain JavaScript, with no dependencies.
I will also use a free UI KIT Material Design for Bootstrap, to apply Material Design look to the project.
Step 1
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.
Step 2
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.
<div class="container my-5">
<div class="row d-flex justify-content-center">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<!-- Here goes the search box -->
<!-- /Here goes the search box -->
</div>
</div>
</div>
</div>
</div>
Step 3
From the Search Docs copy the example of the Search with Icon.
This example will provide us a necessary UI, to which we will add functionality in JavaScript.
<div class="container my-5">
<div class="row d-flex justify-content-center">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<!-- Search box -->
<div class="input-group rounded">
<input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon">
<span class="input-group-text border-0" id="search-addon">
<i class="fas fa-search"></i>
</span>
</div>
<!--/ Search box -->
</div>
</div>
</div>
</div>
</div>
Step 4
Set a proper ID to the input and to the label. We will use this ID in our JavaScript to get the Search component and make it actually searches.
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.
<div class="container my-5">
<div class="row d-flex justify-content-center">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<!-- Search box -->
<div class="input-group rounded mb-4">
<input type="search" id="search-box" class="form-control rounded" placeholder="Search for cars.." aria-label="Search" aria-describedby="search-box">
<span class="input-group-text border-0" id="search-box">
<i class="fas fa-search"></i>
</span>
</div>
<!-- / Search box -->
</div>
</div>
</div>
</div>
</div>
Step 5
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.
<div class="container my-5">
<div class="row d-flex justify-content-center">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<!-- Search box -->
<div class="input-group rounded mb-4">
<input type="search" id="search-box" class="form-control rounded" placeholder="Search for cars.." aria-label="Search" aria-describedby="search-box">
<span class="input-group-text border-0" id="search-box">
<i class="fas fa-search"></i>
</span>
</div>
<!-- / Search box -->
<!-- List -->
<ul class="list-group" id="car-list">
<li class="list-group-item">
<a href="#">Tesla</a>
</li>
<li class="list-group-item">
<a href="#">Honda</a>
</li>
<li class="list-group-item">
<a href="#">Ford</a>
</li>
<li class="list-group-item">
<a href="#">Volkswagen </a>
</li>
<li class="list-group-item">
<a href="#">BMW </a>
</li>
<li class="list-group-item">
<a href="#">Audi </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Step 6
Our UI is ready and now we can take care of JavaScript.
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.
document
// Get a search box
.getElementById("search-box")
// Add keyup event
.addEventListener("keyup", function () {
// Search functionality
});
Step 7
Now we declare necessary variables and assign values to them.
document
// Get a search box
.getElementById("search-box")
// Add keyup event
.addEventListener("keyup", function () {
// Search functionality
// Decalare a variables
let input, filter, ul, li, a, i, txtValue;
// Assign values
input = document.getElementById("search-box");
filter = input.value.toUpperCase();
ul = document.getElementById("car-list");
li = ul.getElementsByTagName("li");
});
Step 8
Add the end we create for Loop to loop through all list items, and hide those who don't match the search query.
document
// Get a search box
.getElementById("search-box")
// Add keyup event
.addEventListener("keyup", function () {
// Search functionality
// Decalare a variables
let input, filter, ul, li, a, i, txtValue;
// Assign values
input = document.getElementById("search-box");
filter = input.value.toUpperCase();
ul = document.getElementById("car-list");
li = ul.getElementsByTagName("li");
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
});
That's it. Our search functionality is ready.
See the final result here
Top comments (0)