Web Search Bar Implementation Using Javascript Conditional Flow

0 0 2 minutes read

Given a list of items and the task is to filter through the items and return the best match using the search bar.

There are several approaches to implement this but, we will be using a simple if-else statement to implement our search bar.

Approach:

Create a folder called gfgSearchBar.
Open the folder in your desired IDE or IDLE.
Create a html file called approachOne.html
Paste the below code into the html file.

Example:

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
  
    <meta http-equiv="X-UA-Compatible" 
            content="ie=edge" /> 
    <meta author="Emmanuel Onah" /> 
  
    <title> 
        zambiatek Search Bar  
    </title> 
</head> 
  
<style> 
    * { 
        margin: 0; 
        padding: 0; 
    } 
  
    .container { 
        box-sizing: border-box; 
    } 
  
    header { 
        display: flex; 
        align-content: center; 
        align-items: center; 
        justify-content: space-evenly; 
        background: #d87093; 
        padding: 0.5rem 1rem; 
    } 
  
    h3 { 
        color: #000; 
        font-family: Arial, Helvetica, sans-serif; 
        font-size: 0.98rem; 
    } 
  
    input[type='search'] { 
        padding: 0.5rem 2rem 0.5rem 0.4rem; 
        border-radius: 4rem; 
        font-size: 0.98rem; 
    } 
  
    .movieCollection { 
        width: 100%; 
        margin: 0 auto; 
        padding: 1rem; 
        box-sizing: border-box; 
        display: flex; 
        flex-wrap: wrap; 
        justify-content: space-between; 
        font-family: -apple-system,  
            BlinkMacSystemFont, 
            'Segoe UI', Roboto, Oxygen, 
            Ubuntu, Cantarell, 'Open Sans', 
            'Helvetica Neue', sans-serif; 
    } 
  
    .movieWrapper { 
        margin-top: 1.5rem; 
    } 
  
    img { 
        width: 400px; 
        height: 400px; 
        display: block; 
    } 
</style> 
  
  
<body> 
    <div class="container"> 
        <header> 
            <h3>Geeks4Geeks Search Bar</h3> 
  
            <input type="search" 
                placeholder="search" id="searchBar" /> 
        </header> 
  
        <div class="movieCollection"> 
            <div class="movieWrapper movieOne"> 
                <h4>The city gate</h4> 
                <time>01.02.1999</time> 
                <img src= 
"https://media.zambiatek.com/wp-content/uploads/20190812003701/html7.png"
                    alt="The city gate" /> 
            </div> 
  
            <div class="movieWrapper movieTwo"> 
                <h4>Land of scientist</h4> 
                <time>01.02.2000</time> 
                <img src= 
"https://media.zambiatek.com/wp-content/uploads/20190812003701/html7.png"
                    alt="Land of scientist" /> 
            </div> 
  
            <div class="movieWrapper movieThree"> 
                <h4>Hidden treasure</h4> 
                <time>01.02.2010</time> 
                <img src= 
"https://media.zambiatek.com/wp-content/uploads/20190812003701/html7.png"
                    alt="Hidden treasure" /> 
            </div> 
  
            <div class="movieWrapper movieFour"> 
                <h4>Beautiful city of heroes</h4> 
                <time>01.02.2020</time> 
                <img src= 
"https://media.zambiatek.com/wp-content/uploads/20190812003701/html7.png"
                    alt="Beautiful city of heroes" /> 
            </div> 
  
            <div class="movieWrapper movieFive"> 
                <h4>The city gate</h4> 
                <time>01.02.1999</time> 
                <img src= 
"https://media.zambiatek.com/wp-content/uploads/20190812003701/html7.png"
                    alt="The city gate" /> 
            </div> 
  
            <div class="movieWrapper movieSix"> 
                <h4>Land of scientist</h4> 
                <time>01.02.2000</time> 
                <img src= 
"https://media.zambiatek.com/wp-content/uploads/20190812003701/html7.png"
                    alt="Land of scientist" /> 
            </div> 
        </div> 
    </div> 
  
    <script> 
        document.addEventListener('DOMContentLoaded', () => { 
  
            const getSearchBar =  
                document.querySelector('#searchBar'); 
            const getAllMovies =  
                document.querySelectorAll('.movieWrapper'); 
  
            getSearchBar.addEventListener('keyup', e => { 
                getAllMovies.forEach(movie => { 
                    if (movie.innerText.toLowerCase().includes( 
                        e.target.value.toLowerCase())) { 
                        movie.style.display = 'block'; 
                        return movie; 
                    } 
                    else { 
                        movie.style.display = 'none'; 
                    } 
                }); 
            }); 
        }); 
    </script> 
</body> 
  
</html> 

Output:

Explanation of the code inside the script tag:

document.addEventListener(‘DOMContentLoaded’); This is a document event that gets executed or triggered immediately the html file gets loaded on your browser. Operations inside this event block doesn’t get executed until the html file is completely loaded to the DOM.

const getSearchBar = document.querySelector(‘#searchBar’); We simply got the search bar element and pass it to getSearchBar variable.

const getAllMovies = document.querySelectorAll(‘.movieWrapper’); We simply got all the movie divs and pass then to getAllMovies variable. Note that getAllMovies is a Nodelist of elements which is an Array look alike not an Array.

getSearchBar.addEventListener(): We simply added a keyup event listener to the search bar.

getAllMovies.forEach(movie => {
    if (movie.innerText.toLowerCase()
    .includes(e.target.value.toLowerCase())) {
        movie.style.display = 'block';
        return movie;
    }
    else {
        movie.style.display = 'none';
    }
});

This block of code simply means the user types into the search bar are present in the movie text content, then style that movie box to be displayed in blocks and return all of them. Else don’t return any movie block.

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!