Search Filter in HTML< CSS < JavaScript | Project Series Day - 3 | Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made a Search Filter with the help of HTML, CSS, and Javascript | It is Project Series Day 3. 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this simple Search Filter step by step
Video Preview of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS and javascript, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
<input type="text" id="myInput" placeholder="Search for names..">
<ul id="list"></ul>
So that was the HTML coding. Now we will code CSS
CSS 🎈( step - 2)
#myInput {
background-image: url('/css/searchicon.png'); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
#list {
/* Remove default list styling */
list-style-type: none;
padding: 0;
margin: 0;
}
#list li a {
border: 1px solid #ddd; /* Add a border to all links */
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6; /* Grey background color */
padding: 12px; /* Add some padding */
text-decoration: none; /* Remove default text underline */
font-size: 18px; /* Increase the font-size */
color: black; /* Add a black text color */
display: block; /* Make it into a block element to fill the whole list */
}
#list li a:hover:not(.header) {
background-color: #eee; /* Add a hover effect to all links, except for headers */
}CSS coding is also done. Now let us move to JAVASCRIPT 😎
Javascript 🎈( step - 3)
namesJson = {
0: "Ahemdabad",
1: "brazil",
2: "chandigarh",
3: "Delhi",
4: "Mumbai",
5: "tamil nadu",
6: "nepal",
7: "haryana",
8: "japur",
9: "washington DC",
10: "america",
};
// Json to Array
namesArray = Object.keys(namesJson).map((name) => { return namesJson[name]; })
namesArray.sort();
let ul = document.getElementById("list");
namesArray.forEach( (name) => {
let li = document.createElement("li");
li.innerHTML = "<a href='#'>"+ name +"</a>"
ul.appendChild(li);
})
const searchBar = document.querySelector('#myInput');
const list = document.querySelector('#list');
searchBar.addEventListener('keyup', (e) => {
const term = e.target.value.toLowerCase();
const names = list.getElementsByTagName('li');
//Array Search
Array.from(names).forEach((name) => {
const title = name.firstElementChild.textContent;
if(title.toLowerCase().indexOf(term) != -1){
name.style.display = 'block';
} else {
name.style.display = 'none';
}
})
})
All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.