In this blog post we going to make search bar with filter options using HTML CSS and JavaScript. The filter options are hidden initially, if user click on the button beside the input field, then option will visible. Its just the design (frontend).
Search bar with filter options is use to search according to given filter by user. In this blog post I have added filter options(images, videos & animations). So, when user submit the search query by selecting one of these filters, then search query give result according to that selected filter. Suppose user have selected videos, then query gives the videos, related to search query. However, this just the design, theirs is nothing in the backend.
Video Tutorial Of Search Bar With Filter Options:
Search bar with filter options.
File structure:
- index.html
- index.css
I've integrated JavaScript within the HTML file.
So, let's start making it step by step.
Step 1: Create basic setup.
First let's create basic file structure.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
<script>
</script>
</html>
CSS
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
background-color: #7333bc;
display: flex;
align-items: center;
justify-content: center;
}
Output:
Step 2: Create input field with filter options.
Let's first create an input field and button. Here we aren't going to add a search button, instead we are going to add a div tag with class="selection". By clicking on a dropdown filter options will appears (we’ll create it later). Users can submit a search query by pressing enter(enter key, as we are going to add input field in form tag).
I have also added a span tag, that’s because I made that arrow icon with CSS. You can use img tag to add images or icons, instead of span tag.
HTML
<div class="box">
<form action="#">
<div class="input_box">
<input type="text" placeholder="Search..." required>
<div class="selection"><p>Images</p><span></span></div>
</div>
</form>
</div>
CSS
.box{
width: 600px;
background-color: #fff;
border-radius: 10px;
padding: 5px;
}
.box form .input_box{
width: 100%;
display: flex;
align-items: center;
position: relative;
}
.box form .input_box input{
width: 100%;
font-size: 25px;
padding: 10px 15px;
border: none;
outline: none;
}
.box form .selection{
background-color: #000;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
}
.box form .selection p{
font-size: 25px;
color: #fff;
}
.box form .selection span{
border-right: 5px solid #fff;
border-bottom: 5px solid #fff;
border-left: 5px solid #000;
border-top: 5px solid #000;
display: inline-block;
rotate: 45deg;
margin-left: 10px;
margin-bottom: 5px;
}
Output:
Step 3: Adding drop down filter options.
Now let's add filter options inside the element with class="input_box" . I have added just three filters (images, videos & animations). You can add more also.
Also read: How to create animated custom select dropdown menu using HTML, CSS and JavaScript.
Also read: How to create custom select dropdown menu using HTML, CSS and JavaScript.
HTML
<div class="categories">
<p class="option">Images</p>
<p class="option">Videos</p>
<p class="option">Animations</p>
</div>
CSS
.box form .categories{
position: absolute;
top: 100%;
right: 0px;
background-color: #000;
color: #fff;
padding: 10px;
font-size: 25;
margin-top: 1px;
border-radius: 5px;
}
.box form .categories p{
margin: 5px 0px;
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
}
.box form .categories p:hover{
background-color: #1e1e1e;
}
Output:
Now we only have to show this filter option box (class="categories") when the user clicks on the button (class="selection").
And to show it on click, we are going to add a separate class to it with styling for visibility.
Let's first hide the filter option box (class="categories").
CSS
.box form .categories{
position: absolute;
top: 100%;
right: 0px;
background-color: #000;
color: #fff;
padding: 10px;
font-size: 0px;
opacity: 0;
pointer-events: none;
margin-top: 1px;
border-radius: 5px;
}
I just forgot to add transition property here in CSS.
Output:
Now create separate class with name active, whenever active class is added to filter option box (class="categories") it will appear.
We'll add and remove that active class using JavaScript for show and hide functionality of filter options (class="categories").
CSS
.box form .active{
font-size: 25px;
opacity: 1;
pointer-events: fill;
}
Now the design part is done.
Now let's add functionality to show and hide these filter options (class="categories") using JavaScript. By adding and removing this active class.
Step 4: Add functionality to the filter option to show and hide.
So first define the required variables.
First, we add functionality to show and hide the filter options box (class="categories"). So, let's toggle the active class in it when clicking on the button (class="selection").
Toggle method adds our active class if not added, and removes if already added.
Also read: Hide the div when click outside of it.
JavaScript
let selection = document.querySelector(".selection");
let selected_text = document.querySelector(".selection p");
let categories = document.querySelector(".categories");
let options = document.querySelectorAll(".categories p");
selection.onclick = function(){
categories.classList.toggle("active");
}
options.forEach(option => {
option.onclick = function(){
selected_text.innerHTML = option.innerHTML;
categories.classList.toggle("active");
}
});
Step 5: Add functionality to select the filter options.
Now we have to make a functionality that, when the user clicks on any options, that option's inner HTML should be equal to that inner HTML of the element (p tag of selection class) in which we have to update or change the text, so that it looks like the clicked option is selected.
After selection, the filter option box should hide. So again, we toggle the active class.
JavaScript
options.forEach(option => {
option.onclick = function(){
selected_text.innerHTML = option.innerHTML;
categories.classList.toggle("active");
}
});
So that’s it. You can see demo in above YouTube video.
You may like:
- How to create a custom select dropdown menu using HTML, CSS and JavaScript.
- How to create dropdown menu using HTML & CSS.
- How to create search bar design that have functionality to empty input field on click using HTML & CSS.
- How to create an custom dynamic placeholder for search bar using HTML, CSS and JavaScript.
- How to create a placeholder that slides up on input field focus using HTML and CSS.
- Create input field that allows only alphanumeric values with JavaScript.
- Convert text case (upper or lower) automatic on user input using JavaScript.
Final code:
So that's how you make search bar with filter options with selection functionality using HTML CSS and JavaScript. If you have any query or suggestion you can write in comment section.
Share your thoughts.