Open In App

Search Bar using HTML CSS and JavaScript

Last Updated : 11 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Nearly 90% of websites include a search bar to enhance user experience by allowing visitors to quickly find relevant content. In this tutorial, we'll learn how to create a simple yet effective search bar using only HTML, CSS, and JavaScript. Rather than going into complex algorithms or databases, we'll focus on a straightforward technique—searching for specific words or phrases within the visible text on a webpage.

Setting Up the Project for Your Webpage

To start a project, create a folder and add files to it.

  • index.html: The main file that contains the structure of the webpage.
  • style.css: The file where you will add all the styling to make the page more appealing.
  • script.js: The file where you add all the interactive functionality to make your webpage dynamic and responsive to user actions.

Project Preview:

project preview
Project preview


  • Create HTML with a search input and an ordered list of animals.
  • Now assign the relevant IDs and classes to particular input boxes and list items. 
  • Apply initial styles for the container, search bar, and list items. Consider animations or transitions for visual appeal.
  • Write a function (search_animal()) to handle input, loop through items, and toggle display based on content match.

Example: In this example, we will see the implementation of the search bar .

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Search Bar Example</title>
    <link rel="stylesheet" 
          type="text/css" href="./style.css">
</head>
<body>
    <div class="container">
        <input id="searchbar" 
               onkeyup="search_animal()" 
               type="text" name="search" 
               placeholder="Search animals..">
        <ul 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">Alligator</li>
            <li class="animals">Donkey</li>
            <li class="animals">Horse</li>
        </ul>
    </div>
    <script src="./script.js"></script>
</body>
</html>
style.css 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
    color:darkblue;   
}
#searchbar::placeholder{
    color:#333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;;
}
#searchbar {
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    width: 50%;
    box-sizing: border-box;
    color:blue;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
}
#list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.animals {
    font-size: 1.2em;
    padding: 10px;
    border: 1px solid #df1919;
    animation: fadeIn 0.5s ease-in-out;
    color: blue;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
script.js 
// JavaScript code
function 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:

output
output


Note : If you want to create more Exiciting Project Based on HTML, CSS and Javascript then check out this article- 30+ Web Development Projects with Source Code [2025]



Search Bar using HTML, CSS and JavaScript

K
Kartikaybhutani
Improve
Article Tags :

Explore

Lightbox