Web Search Bar Implementation Using Javascript Conditional Flow Last Updated : 25 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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.htmlPaste the below code into the html file. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Search Bar</title> <style> #searchBar{ font-size: 20px; } .movieWrapper { display: none; text-align: left; margin-left: 20%; } .search{ text-align: center; padding-top: 15%; width: 30%; margin-left: 35%; } h1{ margin-bottom: 0%; } p{ margin-top: 0%; } </style> </head> <body> <div class=search> <h1>GFG Movie Search</h1> <p>item search example</p> <input type="text" id="searchBar" placeholder="Search for a movie..."> <div class="movieWrapper">Inception</div> <div class="movieWrapper">Interstellar</div> <div class="movieWrapper">The Dark Knight</div> <div class="movieWrapper">Memento</div> <div class="movieWrapper">Dunkirk</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'; } 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. Comment More infoAdvertise with us Next Article Web Search Bar Implementation Using Javascript Conditional Flow emmanuel_onah Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads Creating Progress Bar using JavaScript A Progress Bar is used to depict the progress of any task which is being carried out. Progress Bars are generally used to show the download and upload status. In other words, we can say that Progress Bars can be used to depict the status of anything that is in progress. There are several approaches 3 min read Check whether HTML element has scrollbars using JavaScript Given an HTML document, the task is to identify whether a particular element has scrollbars or not. In this article, we are going to check whether the HTML element has scrollbars using JavaScript. Below are the different approaches to check whether HTML element has scrollbars using JavaScript: Table 3 min read How to Implement Stacked Bar Chart using ChartJS ? In this article, we will learn to implement a few stacked bar charts using JavaScript Chart JS plugin. A Stacked bar chart is a series of columns or bars stacked on top of each other that shows the comparison and composition of some variables. These are very easy-to-see changes overall. It is mainly 4 min read How to implement bar and pie charts using Chart.js ? In this article, we will learn to implement basic bar graphs and pie charts using the Chart JS CDN library.Approach:In the HTML design, use the <canvas> tag for showing the bar or pie chart graph.In the script part of the code, instantiate the ChartJS object by setting the type, data and optio 2 min read script.aculo.us Sliders Disabled Option The script.aculo.us library is a cross-browser library that aims to improving the user interface of a website. The Slider controls are thin tracks that allow the user to input values. It is done by defining a range of values that can be selected by the user by dragging the handle to the appropriate 2 min read JavaScript - Conditional Statements JavaScript conditional statements allow you to execute specific blocks of code based on conditions. If the condition is met, a particular block of code will run; otherwise, another block of code will execute based on the condition.1. Using if StatementThe if statement is used to evaluate a particula 4 min read JavaScript- Control Flow Statements Control flow statements in JavaScript control the order in which code is executed. These statements allow you to make decisions, repeat tasks, and jump between parts of a program based on specific conditions.JavaScript if StatementThe if statement executes a block of code only if a specified conditi 3 min read script.aculo.us Sliders onChange Option The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Slider controls are thin tracks that allow the user to input values. It is done by defining a range of values that can be selected by the user by dragging the handle to the appropriate 2 min read script.aculo.us Sliders onSlide Option The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Slider controls are thin tracks that allow the user to input values. It is done by defining a range of values that can be selected by the user by dragging the handle to the appropriate 2 min read script.aculo.us Sliders Values Option The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Slider controls are thin tracks that allow the user to input values. It is done by defining a range of values that can be selected by the user by dragging the handle to the appropriate 3 min read Like