How to make Html search bar with suggestions using html,css and javascript.
Tags: javascript, html, css
Published: 2023-06-07 02:12:44

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](https://manoarya.com/Manoarya%20All%20Post/HTML%20Complete%20Cheat%20Sheet%20By%20Manoaya.html#HTML%20Starter%20Code).

**(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**