Welcome to the Blog For Codewithrandom. The creation of a search filter using HTML, CSS, and JavaScript is covered in this article. In this Search filter, there is a list of users and a search bar. We simply enter "User Show" into the search bar. So let's write source code for an HTML, CSS, and JS search filter.
By applying some known values, filtering entails condensing and better tailoring a list of records to the user's preferences.
In order to find records in the list or database, we conduct a search utilising obscure search phrases. Because we search so frequently, many pages only provide a search option without any filtering or categories. Which method you choose to employ is up to you; we only demonstrate how to use both.
Hope You Enjoy Our Blog Let's Start With A Basic Html Structure For the Search Filter.
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>
First of all using the div tag with class container we will create a containfer for our search filter javascript and then using the h4 tag selector we will add the heading to our live user filter and then using the small tag we will write a text inside to search by name and or location. Then using the input type text
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.
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;
}
Step1: We will update our project with a few fresh Google fonts by using the Google import link. We will set the background to white and the font face to "Roboto" using the background colour attribute to give the project new styling. With the help of the height and overflow properties, we will also set the height as "100 vh" and "hidden," respectively.
@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;
}
Step2: Now that the display is set to "inline-block," the margin is set to 5 pixels and 20 pixels, respectively, using the class selector (.sub-title) and the class selector (.title), respectively. We will also add the styling to the input by setting the background colour as "dark blue" and the width of our input as 100%."
Now that the display is set to "inline-block," we will set the background to "white," the maximum height to "400px," the border radius to "50%," and the width and height of the image to "50px." All of these settings will be made using the class selector (.user).
Now we have completed our Css Code section. Here is our updated output With HTML and CSS.
Now We add javascript Code to 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')
}
})
}
First, we'll create two variables, result and filter, and use the document by using the var keyword. The HTML elements are chosen using the getElementById property, and the event listener is added using the getData() function. The keyword is then located using the API. Each list item's keyword will be checked, and if a match is found, the.innerHTML property will be used to push the term to the user's display.
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.
Thank you
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.
Written by - Code With Random/Anki
Top comments (0)