Simple JavaScript Searchbar

JavaScript, Web development

Published: 27.10.2023

Build Your Own JavaScript Search Bar – or Choose a Smart Custom Solution

An efficient search function is crucial for a user-friendly website. In this blog, we walk you through how to create a live search bar using JavaScript – perfect for blogs, small shops, or knowledge bases.

Running a larger website or need an advanced search feature with filters, speed, and integration? 4BIS Innovations develops smart, scalable search solutions that actually convert.

Let your search functionality be built by experts. Get in touch to discover what’s possible.

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>

Why a Smart Search Function Is Essential

A powerful search bar enhances the user experience, lowers the bounce rate, and boosts conversions. Whether it's an online store, blog, intranet, or knowledge base – a fast, intuitive search experience makes all the difference.

Did you know that visitors who actively use the search function are far more likely to take action? Think of making a purchase, filling out a contact form, or requesting a quote. A search bar is not just a technical feature, but a strategic element of your website.

A smart search bar:

  • Easily filters large lists or product catalogs
  • Responds quickly and feels intuitive
  • Provides real-time suggestions (autocomplete)
  • Boosts both customer satisfaction and your SEO score

At 4BIS Innovations, we build search solutions that deliver lightning-fast results – even for thousands of products or articles. Our solutions are scalable, intelligent, and fully tailored to your digital environment. Think advanced filters, real-time search results, smart caching, and seamless integration with your CMS or database.

Request a free quote

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>

Curious what a smart search function can do for your business?

Whether you run a webshop, manage a business portal, or maintain a knowledge platform: a well-functioning search feature makes your website not only more user-friendly but also more profitable.

At 4BIS Innovations, we develop tailor-made solutions that align perfectly with your processes, customers, and growth plans — from fast JavaScript components to advanced search technologies with filters and data integrations.

Want to learn more? Discover our services:

Request a Free Quote

Read some of our blogs down here!

Expand your knowledge with the 4BIS Blog...

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