How to make search bar and suggestion using only html.

#javascript #html #css

Hi! What's up this is your boy Manohar Anand From the house of Manoarya.

In this article we are going to assist you with How to make search bar and suggestion using only html for free.

Are you Guys exited? Let me know in the comment. Ask Questions and give suggestions.

Let's Started.

See Demo

Fist of all you need to create a file and name it whatever you want.

Now Copy the following codes.

Add HTML Code


            <!DOCTYPE html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>Snap scrolling Effect</title>
</head>
<body>
  <div class="container">
    <input type="text" list="suggestions" placeholder="Search course" />
    <datalist id="suggestions">
      <option>Manoarya</option>
      <option>React native course</option>
      <option>React course</option>
      <option>Javascript course</option>
      <option>CSS course</option>
      <option>HTML course</option>
    </optgroup>
  </datalist>
</div>
</body>

Add CSS Code


    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      height: 100vh;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: #d3d3d3;
    }
    .container input {
      padding: 10px 20px;
      background: white;
      border: none;
      outline: none;
      border-radius: 5px;
    }

That all for this post. I hope you love this project. please share your thoughts and suggestions in comment below.

Thank you For Visiting. By see You soon.