How to Create a Search Filter Using JavaScript
A Search Filter is a specific attribute a visitor can use to refine the search results of a particular product listing page, e.g. by name, size, color, price, or brand.
Let us start creating our search filter using HTML, CSS, and JavaScript.
We will be creating three separate files in our IDE for this project HTML, CSS, and JavaScript.
Using CSS we present How to Create a Search Filter Using JavaScript projects with source code available for you to copy and paste directly into your own project.
Step 1: First let’s start creating our HTML file.
<html>
<head>
<title>search Filter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" placeholder="Search Users" id="filter_users"/>
<ul id="users-list">
</ul>
<script src="searchFilter.js"></script>
</body>
</html>In order to successfully create our search filter we need to connect our HTML, CSS, and Javascript files and this is how we do it:
50+ Html, Css & Javascript Projects With Source Code
- Inside the <head> section we will link our CSS file using the link tag.
<head>
<title>search Filter</title>
<link rel="stylesheet" href="style.css">
</head>- And inside the <body> we will add our javascript file using the script tag at the end of our HTML elements.
Password Strength Checker using HTML, CSS & JavaScript
<body>
<input type="text" placeholder="Search Users" id="filter_users"/>
<ul id="users-list">
</ul>
<script src="searchFilter.js"></script>
</body>Now let us get back to the basic structure of our Search Filter and understand its creation.
- Inside the body, we will add an input tag with its type as text, placeholder attribute as “Search Users” which will specify a short hint for the expected value of the input field, and the id for the input tag as “filter_users”.
- Now we will create an unordered list with the id as “users-list”. We will create the list using Javascript so in Html it will remain empty.
- In the end, inside the body tag, we will add our Javascript using the script tag and the course for our Javascript file.
OUTPUT:
Step 2:- Now we will write the Javascript code for our Search Filter
var users = [
'Goku',
'Naruto',
'Ichigo',
'Flash',
'Batman',
'Sherlock Holmes',
'Khaleesi',
'Steve Fox'
];
ul = document.getElementById("users-list");
var render_lists = function(lists){
var li = "";
for(index in lists){
li += "<li>" + lists[index] + "</li>";
}
ul.innerHTML = li;
}
render_lists(users);
// lets filters it
input = document.getElementById('filter_users');
var filterUsers = function(event){
keyword = input.value.toLowerCase();
filtered_users = users.filter(function(user){
user = user.toLowerCase();
return user.indexOf(keyword) > -1;
});
render_lists(filtered_users);
}
input.addEventListener('keyup', filterUsers);
- Using the var keyword we will create an array called users, where we will declare all the user names for our list from where we will be searching for an element(user name).
- Now we will get the Html element by Id “users-list” and assign it to a variable called ul.
Ecommerce Website Using Html Css And Javascript Source Code
- We will now create another variable using the var keyword called render_lists and assign value to it. We will use a for loop and give the functioning to it. To access the elements inside the loop, a function has to be created along with a variable for the array elements.
- Now we will access the inner HTML of the ul variable which gets the element using ID and assign it to another variable called li.
- Now we will call the function render_list with users(array) as a parameter.
- Another variable called input is created, we will give value to it to get the Html element by Id – filter_users, this will get the <input> element from the Html document.
- We will now create a variable called filter users which will have a function as its value and assign the functionality to it.
- At last, we will access the input element and add an event listener to it where the type of event is ‘key’ and the function is ‘filterers’.
Create Hidden Search Bar HTML, CSS, And JavaScript
Step 3: Styling the basic structure of the Search filter using CSS.
#filter_users{
width:100%;
padding:10px;
}
#users-list{
margin:0;
padding:0;
}
#users-list li{
list-style:none;
padding:10px;
margin:5px 0;
border: 1px solid #e4e4e4;
}- The HTML element with id=”filter_users” i.e, the input tag in Html will be styled by setting the width as 100% and padding as 10px.
- The HTML element with id=”users-list”, i.e the unordered list will be styled by setting the margin as 0 and padding also 0.
- The list items with id as users-list will be styled by using these properties: list-style: none, padding:10px, margin:5px 0, border: 1px solid #e4e4e4.
OUTPUT: With HTML and CSS, no Javascript
This is how the Input Type text appears for our Search filter with HTML and CSS combined without Javascript.
OUTPUT: With HTML, CSS, and Javascript Combined
I hope that this article was helpful and you understood the whole project. Now let’s take a look at the Live Preview of the ‘Our Service’ section.
Flappy Bird Game Using HTML &JavaScript
Now we have successfully created our Search Filter using HTML, CSS & JavaScript. You can use this project directly by copying it into your IDE. We hope you understood the project, If you have any doubts feel free to comment!!
In this blog post, we will discuss How to Create a Search Filter Using JavaScript with complete source code so you can just copy and paste them into your own project.
Happy exploring and learning !!
Follow: codeWithRandom
Code by: James
Written by: Cheshta Vohra
