Create an Instant Search Filter Using JavaScript – Step-by-Step Guide

Google Advertisement

Learn how to build a real-time search filter for a list using JavaScript. A simple, beginner-friendly guide with complete code and clear explanations.

Published on 16 May 2025

🧠 Make a Real-Time Search Filter for a List in JavaScript

Have you ever used a search bar on a website that instantly filters a list as you type? That's called a real-time search filter. In this article, we'll learn how to create this powerful feature using pure JavaScript — no libraries needed!

🔥 Read with Full Features on Our Website

We’ll go step-by-step and explain everything in simple language so even a beginner can understand and build it.

🎯 What We Will Build

We’ll create:

A simple list of items (e.g., names of fruits)
A search input box
A real-time filter using JavaScript that hides non-matching items as you type

Here’s a preview of the final result:

When you type "ap", only Apple and Grapes will show. Cool, right?

🧱 Step 1: Create the HTML Structure

We’ll start with a basic HTML page that includes:

Google Advertisement

A search input
An unordered list (<ul>) with list items (<li>)

💻 HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Real-Time Search Filter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    #searchInput {
      padding: 10px;
      width: 300px;
      font-size: 16px;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      padding: 8px 0;
    }
  </style>
</head>
<body>

  <h2>Real-Time Search Filter</h2>
  <input type="text" id="searchInput" placeholder="Search for a fruit...">

  <ul id="fruitList">
    <li>Apple</li>
    <li>Banana</li>
    <li>Grapes</li>
    <li>Mango</li>
    <li>Pineapple</li>
    <li>Orange</li>
  </ul>

  <script src="script.js"></script>
</body>
</html>

🧠 Step 2: Add JavaScript to Filter the List

Now let’s add the JavaScript code that will:

Detect when the user types in the search box
Get the search value
Loop through each list item
Show only the items that match the search

💻 JavaScript Code (`script.js` file):

// Step 1: Get the input and the list
const searchInput = document.getElementById('searchInput');
const fruitList = document.getElementById('fruitList');
const fruits = fruitList.getElementsByTagName('li');

// Step 2: Listen for input in real-time
searchInput.addEventListener('keyup', function () {
  const filter = searchInput.value.toLowerCase();

  // Step 3: Loop through list items
  for (let i = 0; i < fruits.length; i++) {
    const fruitName = fruits[i].textContent.toLowerCase();

    // Step 4: Check if input matches list item
    if (fruitName.includes(filter)) {
      fruits[i].style.display = '';
    } else {
      fruits[i].style.display = 'none';
    }
  }
});

🔍 Code Explanation

Let’s break down what’s happening step by step:

✅ Get Elements

We're grabbing the input box and list items using getElementById and getElementsByTagName.

✅ Add Event Listener

Every time the user types a key (keyup), the function runs.

✅ Convert Input to Lowercase

Google Advertisement

This makes the search case-insensitive (so "apple" matches "Apple").

✅ Loop Through Each List Item

We loop through all <li> elements and get their text.

✅ Show or Hide Items

If the list item includes the typed word, we show it.
Otherwise, we hide it using display: none.

✅ Bonus Tip: Add More Items or Categories

You can easily update this list to search for:

Names of countries
Movie titles
Products in a shop
Anything else!

Just replace the <li> items in HTML with your own content.

🧪 Final Output

Google Advertisement

Here’s a quick demo of what it looks like in your browser:

📌 Conclusion

Congratulations! 🎉 You just built a real-time search filter using plain JavaScript. This small but powerful feature is very useful in websites, search tools, and applications.

What You Learned:

How to get elements in JavaScript
How to use event listeners
How to loop through list items
How to filter based on input

📁 Full Project Files

If you want to test it locally, create two files:

index.html – Copy the HTML code
script.js – Copy the JavaScript code

Then open index.html in your browser and try typing in the input box!

Google Advertisement

Create an Instant Search Filter Using JavaScript – Step-by-Step Guide

🧠 Make a Real-Time Search Filter for a List in JavaScript

🎯 What We Will Build

🧱 Step 1: Create the HTML Structure

💻 HTML Code:

🧠 Step 2: Add JavaScript to Filter the List

💻 JavaScript Code (`script.js` file):

🔍 Code Explanation

✅ Get Elements

✅ Add Event Listener

✅ Convert Input to Lowercase

✅ Loop Through Each List Item

✅ Show or Hide Items

✅ Bonus Tip: Add More Items or Categories

🧪 Final Output

📌 Conclusion

What You Learned:

📁 Full Project Files

Recommended Posts

भारत में कोरोना अपडेट 25 मई 2025: 257 सक्रिय मामले, नए वैरिएंट की पहचान, लक्षण हल्के

Build a Simple Quiz App Using JavaScript – Step-by-Step Guide for Beginners

Sucess Story : राजस्थान के मयंक पुरोहित ने देश में रचा इतिहास, आईएफएस परीक्षा पहले ही प्रयास में हासिल की सातवीं रैंक

Easily Create Dark and Light Mode with localStorage in JavaScript

Secure Password Maker Using JavaScript with Simple Code Guide

कौन हैं Banu Mushtaq, जिनकी शॉर्ट स्टोरी कलेक्शन ‘Heart Lamp’ को मिला International Booker Prize

Create an Instant Search Filter Using JavaScript – Step-by-Step Guide

🧠 Make a Real-Time Search Filter for a List in JavaScript

🎯 What We Will Build

🧱 Step 1: Create the HTML Structure

💻 HTML Code:

🧠 Step 2: Add JavaScript to Filter the List

💻 JavaScript Code (script.js file):

🔍 Code Explanation

✅ Get Elements

✅ Add Event Listener

✅ Convert Input to Lowercase

✅ Loop Through Each List Item

✅ Show or Hide Items

✅ Bonus Tip: Add More Items or Categories

🧪 Final Output

📌 Conclusion

What You Learned:

📁 Full Project Files

Recommended Posts

भारत में कोरोना अपडेट 25 मई 2025: 257 सक्रिय मामले, नए वैरिएंट की पहचान, लक्षण हल्के

Build a Simple Quiz App Using JavaScript – Step-by-Step Guide for Beginners

Sucess Story : राजस्थान के मयंक पुरोहित ने देश में रचा इतिहास, आईएफएस परीक्षा पहले ही प्रयास में हासिल की सातवीं रैंक

Easily Create Dark and Light Mode with localStorage in JavaScript

Secure Password Maker Using JavaScript with Simple Code Guide

कौन हैं Banu Mushtaq, जिनकी शॉर्ट स्टोरी कलेक्शन ‘Heart Lamp’ को मिला International Booker Prize

💻 JavaScript Code (`script.js` file):