ADVERTISEMENT

Create Search Filter Using HTML,CSS & JavaScript

Telegram Group Join Now

ADVERTISEMENT

Create Search Filter Using HTML,CSS & JavaScript

 
 
 
Create Search filter Using HTML,CSS & JavaScript
Create Search filter Using HTML,CSS & JavaScript

 

ADVERTISEMENT

 
 

ADVERTISEMENT

Welcome To The Codewithrandom Blog. In This Blog, We Learn How To Create A Search Filter Using Html, Css, And Javascript.

 

ADVERTISEMENT

Code by N/A
Project Download Link Available Below
Language used HTML, CSS and JavaScript
External link / Dependencies No
Responsive Yes
Search filter Table

Hope You Enjoy Our Blog Let’s Start With A Basic Html Structure For Search Filter.

ADVERTISEMENT

Html Code For Search Filter

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Live User Filter</title>
</head>
<body>
<div class="container">
<header class="header">
<h4 class="title">Live User Filter</h4>
<small class="subtitle">Search by name and/or location</small>
<input type="text" id="filter" placeholder="Search">
</header>
<ul id="result" class="user-list">
<li>
<h3>Loading...</h3>
</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>

There is all the HTML Code for the Search Filter. Now, you can see output without Css and JavaScript. then we write Css and JavaScript for the Search filter.

Portfolio Website using HTML and CSS (Source Code)

Only Html Code Output 

ADVERTISEMENT

 

 
Create Search filter Using HTML,CSS & JavaScript
 Search filter Using HTML,CSS & JavaScript

Css Code For Search Filter

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #f8f9fd;
font-family: 'Roboto', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
border-radius: 5px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
width: 300px;
}
.title {
margin: 0;
}
.subtitle {
display: inline-block;
margin: 5px 0 20px;
opacity: 0.8;
}
.header {
background-color: #3e57db;
color: #fff;
padding: 30px 20px;
}
.header input {
background-color: rgba(0, 0, 0, 0.3);
border: 0;
border-radius: 50px;
color: #fff;
font-size: 14px;
padding: 10px 15px;
width: 100%;
}
.header input:focus {
outline: none;
}
.user-list {
background-color: #fff;
list-style-type: none;
margin: 0;
padding: 0;
max-height: 400px;
overflow-y: auto;
}
.user-list li {
display: flex;
padding: 20px;
}
.user-list img {
border-radius: 50%;
object-fit: cover;
height: 50px;
width: 50px;
}
.user-list .user-info {
margin-left: 10px;
}
.user-list .user-info h4 {
margin: 0 0 10px;
}
.user-list .user-info p {
font-size: 12px;
}
.user-list li:not(:last-of-type) {
border-bottom: 1px solid #eee;
}
.user-list li.hide {
display: none;
}

Now we have completed our Css Code section. Here is our updated output With HTML and CSS.

50+ Html ,Css & Javascript Projects With Source Code

ADVERTISEMENT

Html and Css Updated output

ADVERTISEMENT

 

 
Create Search filter Using HTML,CSS & JavaScript
 Search filter Using HTML,CSS & JavaScript

Now We add javascript Code the get user profile and Details and implement a Search filter.

JavaScript Code For Search Filter

const result = document.getElementById('result')
const filter = document.getElementById('filter')
const listItems = []
getData()
filter.addEventListener('input', (e) => filterData(e.target.value))
async function getData() {
const res = await fetch('https://randomuser.me/api?results=50')
const { results } = await res.json()
// Clear result
result.innerHTML = ''
results.forEach(user => {
const li = document.createElement('li')
listItems.push(li)
li.innerHTML = `
<img src="${user.picture.large}" alt="${user.name.first}">
<div class="user-info">
<h4>${user.name.first} ${user.name.last}</h4>
<p>${user.location.city}, ${user.location.country}</p>
</div>
`
result.appendChild(li)
})
}
function filterData(searchTerm) {
listItems.forEach(item => {
if(item.innerText.toLowerCase().includes(searchTerm.toLowerCase())) {
item.classList.remove('hide')
} else {
item.classList.add('hide')
}
})
}

Final Output Search filter Using HTML,CSS & javaScript

 
Create Search filter Using HTML,CSS & JavaScript
Create Search filter Using HTML,CSS & JavaScript

 

Now we have completed our Search filter Using HTML, CSS, and JavaScript. I hope you like the Search filter. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

10+ Javascript Projects For Beginners With Source Code

ADVERTISEMENT

Thank you

ADVERTISEMENT

In this post, we learn how to create a Search filter using HTML CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

ADVERTISEMENT

Written by – Code With Random/Anki

ADVERTISEMENT

Which code editor do you use for this Search filter coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

ADVERTISEMENT

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

No!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT