Hi folks! I am so excited to build this amazing search bar with suggestions using simple HTML, CSS and Javascript.
I hope you are excited. So friends Let's get started.
First thing First let's see the demo.
I write this post step by step So don't worry. After doing this project you got lots of things to know.
Step 1 : Design Using HTML & CSS.
The first step is about how to build a ui for the html search and suggestions page.
(i) Add html starter code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Learn More about html starter template hare.
(ii) Attached CSS file.
Using the below code to attached your CSS file so that our html page looks attractive and beautiful.
<link rel="stylesheet" href="SearchBar.css" type="text/css" media="all" />
Make sure you change the href="{with your css file name without curly bracket.}".
(iii) Implement Input tag.
Input tag is html inbuild tag that helps us to inter any data.
<div id="main_container">
<input type="search" id="search_input" autofocus="autofocus" placeholder="Search" onkeyup="SearchNow()"/>
</div>
Before adding the input tag we take a div with id of main_container and wrap the input tag inside this container.
Input attribute Explain
We take a search type of input and give it a placeholder for showing text inside of the input tag after that we take another attribute onkeyup.
Actually onkeyup is an event that triggerd when someone press any keyboard key.
(iv) Add the suggestions area
<div id="suggestions_container">
<ul id="ultag">
</ul>
</div>
I take a div as a suggestions container and inside of it i also take a ul tag with id ultag and inside of this ul tag i pulled li and a tags diyanamically using javascript so wait for it.
Now our final HTML code looks like following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Search bar with suggestions</title>
</head>
<body onclick="hide_sugg()">
<div id="main_container">
<input
type="search"
id="search_input"
autofocus="autofocus"
placeholder="Search"
onkeyup="SearchNow()"
/>
<div id="suggestions_container">
<ul id="ultag"></ul>
</div>
</div>
<script src="SearchBar.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Add the CSS to look more clean
Create a css file and Implement following style. make sure you attached this file with html file using link tag.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Sans-Serif;
}
#main_container{
height: 100%;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
}
#search_input{
padding: 10px 20px;
border-radius: 5px;
width: 90%;
height: 50px;
outline: none;
font-size: 20px;
transition: .2s ease-out;
position: sticky;
top: 5px;
z-index: 123;
}
#search_input:hover{
border: 2px solid dodgerblue;
}
#suggestions_container{
width:100%;
height: 300px;
border-radius: 10px;
border-bottom: 2px solid gray;
position: fixed;
top: -100%;
background: white;
overflow: scroll;
transition:.2s ease-out;
}
ul{
list-style-type: none;
}
ul li a{
font-size: 20px;
text-decoration: none;
color: black;
text-transform: capitalize;
display: flex;
padding: 10px 20px;
cursor: default;
}
Step 2 : Add Functionality (Javascript).
function SearchNow() {
document.getElementById('suggestions_container').style.top = "60px";
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('search_input');
filter = input.value.toUpperCase();
ul = document.getElementById("ultag");
li = ul.getElementsByTagName('li');
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
//pull data into ultag container
const suggestions = [
'how to make a slidebar',
'how to make this website',
'html explore ',
'css explore',
'dom explore',
'more items add hare that you want to suggest',
'how to make a slidebar',
'how to make this website',
'html explore ',
'css explore',
'dom explore',
'more items add hare that you want to suggest',
'how to make a slidebar',
'how to make this website',
'html explore ',
'css explore',
'dom explore',
'more items add hare that you want to suggest'
]
//loop upper array
for (var i = 0; i < suggestions.length; i++) {
const ultag = document.getElementById('ultag');
ultag.insertAdjacentHTML('afterbegin', `
<li><a href='#'>${suggestions[i]}</a></li>
`);
}
//hide suggestions
function hide_sugg() {
document.getElementById('suggestions_container').style.top = "-100%";
}
Thanks You
Top comments (0)