Search Bar using HTML, CSS and JavaScript

01 Jul, 2022
Every website needs a search bar through which a user can search the content of their concern on that page. A basic search bar can be made using HTML, CSS, and JavaScript only. Advance searching algorithms look for many things like related content and then shows the results. The one that we are going to make will look for substrings in a string. 
Using HTML
In this section, we will write HTML part of the code. In HTML, we will just link our Stylesheets and our JavaScript file. Input tag is used for the creation of the search bar and it includes several attributes like type, placeholder, name. We also need a list of items which will hold different animal names that will allow us to search for animals through this. The classes and ID’s used in tags will be defined in stylesheet below. 
HTML
<!DOCTYPE html><html>      <head>    <title>        Creating Search Bar using HTML        CSS and Javascript    </title>          <!-- linking the stylesheet(CSS) -->    <link rel="stylesheet" type="text/css" href="./style.css"></head>  <body>          <!-- input tag -->    <input id="searchbar" onkeyup="search_animal()" type="text"        name="search" placeholder="Search animals..">          <!-- ordered list -->    <ol id='list'>        <li class="animals">Cat</li>        <li class="animals">Dog</li>        <li class="animals">Elephant</li>        <li class="animals">Fish</li>        <li class="animals">Gorilla</li>        <li class="animals">Monkey</li>        <li class="animals">Turtle</li>        <li class="animals">Whale</li>        <li class="animals">Aligator</li>        <li class="animals">Donkey</li>        <li class="animals">Horse</li>    </ol>          <!-- linking javascript -->    <script src="./animals.js"></script></body>  </html>
Output:
 
Using CSS
Though the above input tag and the ordered list looks fine, it still needs some styling. For the search bar styling, some margin and padding are added to make it look clean. The measurements are in percentage so that it adjusts itself when used in any size of the screen (Mobile, Desktop etc). Webkit transition is used to change the width of the Search bar when clicked. The initial width of search bar is 30%, but when it is clicked, it will change to 70% with an ease-in ease-out transition of 0.15 seconds.
CSS
  #searchbar{     margin-left: 15%;     padding:15px;     border-radius: 10px;   }    input[type=text] {      width: 30%;      -webkit-transition: width 0.15s ease-in-out;      transition: width 0.15s ease-in-out;   }    /* When the input field gets focus,        change its width to 100% */   input[type=text]:focus {     width: 70%;   }   #list{    font-size:  1.5em;    margin-left: 90px;   } .animals{   display: list-item;      } 
Output After adding Styling, our page should look like this.  
Note: If the styling of your page doesn’t change, make sure the style.css file is in the same folder as index.html. It is still incomplete, as we still need the JavaScript to complete the functionality of this search bar. 
Using JavaScript
In the HTML code of search bar, we gave the input an id=”searchbar” and onkeyup we called, the function “search_animal”. onkeyup calls the function every time a key is released on the keyboard. 
We first get our input using getElementById. Make sure to convert it to lower case to avoid case sensitivity while searching. An array of documents is stored in x. This contains every list that has id=”animals”. After that a loop is run to check if innerHTML of every document includes the input substring if it doesn’t, the display property is set to ‘None’ so that it is invisible on the front end. 
Javascript
// JavaScript codefunction search_animal() {    let input = document.getElementById('searchbar').value    input=input.toLowerCase();    let x = document.getElementsByClassName('animals');          for (i = 0; i < x.length; i++) {         if (!x[i].innerHTML.toLowerCase().includes(input)) {            x[i].style.display="none";        }        else {            x[i].style.display="list-item";                         }    }}
Output: 
 
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
varshagumber28
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
How to Upload Image into Database and Display it using PHP ?
Build a Survey Form using HTML and CSS
CSS | :not(:last-child):after Selector
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS