Search bar app

Introduction

This search bar basically searches through a list of names and does a partial match till it finds the name typed by the user. In this article, I will work you through in simple terms, how you can build this simple search bar using HTML, CSS, and JavaScript, especially making it functional using vanilla Javascript.

PHOTO-2022-08-02-19-17-44 (3).jpg

(screenshots of the Search Bar)

Step 1

** The HTML code**

The body element comprises a div container that has an input field and an unordered list of names.

<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div id="container">
        <div id="search">
            <label for="searchInput">Search Users</label>
            <input id="searchInput" type="text">
        </div>

        <ul id="results">
            <li class="name">Liam</li>
            <li class="name">Noah</li>
            <li class="name">Cassie</li>
            <li class="name">Oliver</li>
            <li class="name">Katherine</li>
            <li class="name">Sophia</li>
            <li class="name">Lucas</li>
            <li class="name">Henry</li>
        </ul>
    </div>
        <script src="index.pack.js"></script>
    </body>
</html>

Step 2

The css code

Style the following elements:

html, body {
    margin: 0;
    padding: 0;
}

#container {
    width: 400px;
    margin: 0 auto;
    margin-top: 20px;
    background-color: #3c1518;
}

#search {
    display: flex;
    padding: 20px;
    background-color: #3c1518;
    color: white;
    text-shadow: 5px 5px black;
}

#search label {
    font-size: 24px;
    font-weight: bold;
    margin-right: 15px;
}

#results {
    display: block;
    padding: 10px;
}

#results .name {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    background-color: white;
    margin-bottom: 10px;
    list-style-type: none;
    color: #3c1518;
    font-weight: bold;
}

Step 3

Get the HTML elements in JavaScript

The input field is grabbed from the HTML into JavaScript so that the user's actions in the input field can be manipulated using JavaScript.

let searchInput = document.getElementById(‘searchInput’);

Listen for the user event using a "key-up event listener''.
The event listener takes in the event and a call back function where you set the value of what the user is typing.

searchInput =

addEventListener(‘keyup’,

function (event) {

let searchQuery = event.target.value; }

Store the value of the input field in a variable e.g

let searchQuery = searchInput.value;

Step 4

Get the HTML element that is displaying the list of names

The list element is grabbed from the HTML into JavaScipt so that it can be looped through.

let collection = document.getElementByClassName(‘name’);

Step 5

Loop through the names in the list

To have access to all the names, you have to loop through the names one after the other.
Assign a variable name to the result of the loop.

for (let counter = 0; counter < collection.length; counter++){

let currentName = collection[counter].textContent;

} }

Step 6

compare the currentName with the searchQuery

.Includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

If currentName includes the user's searchQuery or the user’s content there will be a match, then the UI of that one element will be displayed and other elements will be hidden.

if (currentName.includes (searchQuery)){

collection [counter].style.display = “block”,

}else{ collection [counter].style.display = “none”;

} }

The JavaScipt code


document.getElementById("searchInput").addEventListener("keyup", function(event) {
    let searchQuery = event.target.value.toLowerCase();
    let collection = document.getElementsByClassName('name');

    for (let counter = 0; counter <  collection.length; counter++) {
   const currentName =  collection[counter].textContent.toLowerCase();


     if(currentName.includes(searchQuery)){
            collection[counter].style.display = "block";

}else{
                 collection[counter].style.display = "none";
}
    }

Conclusion

I examined above the implementation of a user search bar app using HTML, CSS, and JavaScript. From getting the input value from the user to getting the list from HTML. Then comparing them and displaying only the UI of the input element that matches any name in the name list.
I hope this helps!

Build a user search bar using vanilla JavaScript

Table of contents