Search filter javascript | user filter using HTML CSS Javascript
Welcome🎉 to Code With Random blog. In this blog, we learn how to create a search filter. We use HTML & CSS and javascript for these search filters. Hope you enjoy our blog so let’s start with a basic HTML structure for search filter.
Search filter HTML part code
<!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 HTML code for the search filter. Now, you can see output without CSS, then we write CSS for our Search filter.
output
Search filter CSS part Code
@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 section, Here is our updated output CSS.
output
Now add javascript for the get user profile and implement a Search filter!
Search filter Javascript part code
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
Now we have completed our javascript section, Here is our updated output with javascript. Hope you like the Search filter. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕
Check out more…..
In this post, we learn how to create a Search filter using simple HTML CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.