Simple JavaScript Searchbar

JavaScript, Web development

Published: 27.10.2023

Search bars are a very common occurrence on websites. You see them everywhere in all different shapes and sizes. Some are just simple text search bars and some are large complex search bars that will query a database or make API calls.

In this article I will show you how to make a simple text search bar that searches a list of HTML elements.

First things first, create your HTML

  
<input type="text" placeholder="Search fruits..." id="searchBar">
<ul id="fruits-list">
    <li>Apple</li>
    <li>Pear</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>

This code will print a very simple list on the screen that will ook something like this:
Searchbar HTML example

Next, we can write a script tag below this code and start writing our JavaScript. We start with adding a “keyup” event listener to the text search bar. JavaScript allows you to write the same code in different ways. In this example I will use an “arrow function” and I get the search value from the “evt” parameter.

  
<script>
    document.getElementById("searchbar").addEventlistener("keyup", evt => {
    	const searchValue = evt.target.value.toLowerCase()
    })
</script>

Now every time you type inside the text field, the value of what you typed is parsed to lowercase letters and saved in the searchValue variable. The reason we use .toLowerCase() is to make the search bar non-case-sensitive.

Next thing we do; we select all the <li> elements inside our <ul> element and loop over them to check their content.

  
<script>
    document.getElementById("searchbar").addEventlistener("keyup", evt => {
    	const searchValue = evt.target.value.toLowerCase()
        for (const li of document.querySelector("#fruits-list")) {
            const content = li.innerText.toLowerCase()
            li.style.display = content.includes(searchValue) ? "list-item" : "none"
        }
    })
</script>

The content of the list item is it’s innerText, parsed to lowercase to ignore case-sensitivity. To change the visibility of the <li> element we use a Conditional (ternary) operator. Conditional operators: Operand one is a condition, the part after the “?” will be used if condition is “truthy”, the part after “:” will be used if the condition is ”falsy”.

This code will now show the element when it’s text contains your searched string, and hide it if when it does contain.

There is a lot of different ways to write this code and to achieve the same results. This article shows a very simple & compact JavaScript search bar.

Final code:

<input type="text" placeholder="Search fruits..." id="searchBar">
<ul id="fruits-list">
    <li>Apple</li>
    <li>Pear</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>  
<script>
    document.getElementById("searchbar").addEventlistener("keyup", evt => {
    	const searchValue = evt.target.value.toLowerCase()
        for (const li of document.querySelector("#fruits-list")) {
            const content = li.innerText.toLowerCase()
            li.style.display = content.includes(searchValue) ? "list-item" : "none"
        }
    })
</script>

Read some of our blogs down here!

Expand your knowledge with the 4BIS Blog...

WordPress and Plugins – A world that opens up for you!

WordPress, Web development, Ecommerce / Webshop, Knowledge Base, WooCommerce

With plugins you can expand the functionality of WordPress or add completely new functions to WordPress. You can make plugins yourself, provided you know PHP, or you can download them.

Read more

Unveiling Tech-Nieuws.nl: Where Innovation Meets Ingenuity

SEO / SEA, Software Modernisation, Web development, PHP, Symfony, Digital Marketing

In the bustling realm of technology, staying updated is not just a necessity but a lifestyle. With an overflow of information bombarding us daily, having a reliable source to curate and present the latest tech news becomes invaluable. Enter Tech-Nieuws.nl,...

Read more

HR software: This is how you automate Human Resource Management

Business software, Software Modernisation, Web development, Automate

HRM, also known as Human Resource Management, is an important part for every company. Especially if you have many employees, an HR department is indispensable. However, it is not necessary to have a huge HR department. Much can be automated using HR...

Read more

And what can we do for you?_

Do you want to know more or are you interested? Please feel free to contact us directly, by phone or via mail.
Or use one of our contact forms so that we can answer you as quickly and appropriately as possible can give. We would love to hear from you!

back to top