How to Create a Filter List using JavaScript?

Last Updated : 28 Aug, 2024

Filtering lists is a common functionality in web development, allowing users to search and narrow down large datasets based on specific criteria. JavaScript provides powerful tools to implement such filtering mechanisms efficiently.

Approach:

Create an input field and a container for list items.
Style the input field and list items for visual appeal.
Get references to the input field and list items using their IDs or classes.
Add an event listener to the input field to detect changes in the search query.
Iterate through each list item, compare its text content with the search query (case-insensitive), and show/hide items accordingly based on whether they match the query. This ensures that only items containing the search query are displayed dynamically as the user types.

Example: Implementation to create a filter list using Javascript.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Filter List</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f1f1f1;
        }

        .container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        #filterInput {
            margin-bottom: 20px;
            padding: 10px;
            width: calc(100% - 20px);
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        #list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .listItem {
            padding: 10px;
            margin: 5px 0;
            background-color: #f9f9f9;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .listItem:hover {
            background-color: #e9e9e9;
        }

        .hidden {
            display: none;
        }
    </style>
</head>

<body>

    <div class="container">
        <input type="text" id="filterInput" placeholder="Filter list...">
        <ul id="list">
            <li class="listItem">JavaScript</li>
            <li class="listItem">Python</li>
            <li class="listItem">Java</li>
            <li class="listItem">C++</li>
            <li class="listItem">Ruby</li>
            <li class="listItem">PHP</li>
        </ul>
    </div>

    <script>
        // JavaScript Filter Functionality

        const filterInput =
            document.getElementById('filterInput');
        const listItems =
            document.querySelectorAll('.listItem');

        filterInput.addEventListener('input', function () {
            const filterValue = filterInput.value.toLowerCase();
            listItems.forEach(function (item) {
                const text = item.innerText.toLowerCase();
                if (text.includes(filterValue)) {
                    item.classList.remove('hidden');
                } else {
                    item.classList.add('hidden');
                }
            });
        });
    </script>

</body>

</html>

Output:

Nesting For Loops in JavaScript

yuvrajghule281

Improve

Article Tags :

How to Create a Filter List using JavaScript?

Approach:

Similar Reads

Thank You!

What kind of Experience do you want to share?