HTML Table Search Filter using Pure JavaScript Tutorial

Submitted by oretnom23 on Saturday, January 28, 2023 - 14:30.

In this tutorial, you will learn how to create a Search Filter Bar for HTML Table using JavaScript. This tutorial aims to provide IT/CS students and new programmers with a reference to learn about using JavaScript to develop creative web applications. Here, snippets are provided and a simple working application that demonstrates the main objectives of this tutorial is provided and is free to download.

Why do we need to Implement a Search Bar for HTML Table?

A Search Bar/Search Filter for HTML Table is not always a requirement in a web application. The developers usually implement this feature along with the pagination feature to easily navigate and find some data from the HTML Table. This feature allows the user to easily find the table row that contains the keyword entered on the search bar.

How to Implement Search Filter in HTML Table using JavaScript?

JavaScript comes with various built-in and useful methods and APIs. JS has a method called addEventListener() and inludes() that can be used to make the Search Filter functional. Using the addEventListener(), we can identify if the search bar has changed so we can trigger the search functions. The includes() method will become handy for identifying if the table row contains the keyword entered in the search box. Check out the following snippet to have a better idea of using these JS methods to implement the search filter for HTML Table functionality.

    document.getElementById('searchBarInput').addEventListener('input', function(e){
        e.preventDefault();
        var keyword = (this.value).toLowerCase()
        document.querySelectAll('table>tbody tr').forEach( ele => {
            var tr_contents = (ele.innerText).toLowerCase()
 
            if(tr_contents.includes(keyword) === false && keyword != ""){
                ele.style.display = "none";
            }else{
                ele.style.display = "table-row";
            }
        })
    })

The script above hides the table row for those contents doesn't have or contain the keyword entered on the search input. The function will be triggered each time the search input changes to its value.

Example

Here's an example web application source code that demonstrates the use of JavaScript to implement the Search Filter for HTML Table.

Step 1: Creating the Page Interface

The following script is an HTML file that contains the script of the application page with a table with static data and a search bar element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Search Filter - JavaScript</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
 
    <style>
        html, body{
            height: 100%;
            width: 100%;
        }
        body{
            height: 100%;
            width: 100%;
        }
        #search-box-container input.rounded-pill{
            border-top-right-radius: 0px !important;
            border-bottom-right-radius: 0px !important;
        }
        #search-box-container span.rounded-pill{
            border-top-left-radius: 0px !important;
            border-bottom-left-radius: 0px !important;
        }
    </style>
</head>
<body style="background:#eff3fc">
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" style="background:#495C83">
        <div class="container">
            <a class="navbar-brand" href="./">HTML Table Search Filter - JavaScript</a>
            <div>
                <a href="https://sourcecodester.com" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
            </div>
        </div>
    </nav>
 
    <main class="container-fluid py-5" style="margin-top:5vh;">
        <div class="">
            <h2 class="text-center">HTML Table Search Filter</h2>
            <hr>
            <div class="row my-2">
                <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12 mx-auto">
                    <div class="input-group mb-3" id="search-box-container">
                        <input type="search" class="form-control rounded-pill" id="search" aria-label="Search" placeholder="Search here...">
                        <span class="input-group-text rounded-pill"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div>
 
            <div class="card mt-3 rounded-0">
                <div class="card-body rounded-0">
                    <div class="container">
                        <div class="table-responsive">
                            <table class="table table-sm table-striped table-bordered" id="sampleTbl">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Phone</th>
                                        <th>Email</th>
                                        <th>Address</th>
                                        <th>Postal/Zip</th>
                                        <th>Region</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Sarah Everett</td>
                                        <td>1-617-912-7433</td>
                                        <td>[email protected]</td>
                                        <td>P.O. Box 556, 9486 Nisl Rd.</td>
                                        <td>4746</td>
                                        <td>Pernambuco</td>
                                    </tr>
                                    <tr>
                                        <td>Oleg Larsen</td>
                                        <td>(821) 363-8457</td>
                                        <td>[email protected]</td>
                                        <td>987-724 Per Road</td>
                                        <td>475454</td>
                                        <td>Luik</td>
                                    </tr>
                                    <tr>
                                        <td>Benedict White</td>
                                        <td>1-548-350-4667</td>
                                        <td>[email protected]</td>
                                        <td>Ap #989-5168 Fames Av.</td>
                                        <td>113488</td>
                                        <td>Jönköpings län</td>
                                    </tr>
                                    <tr>
                                        <td>Nola Delacruz</td>
                                        <td>1-936-475-8674</td>
                                        <td>[email protected]</td>
                                        <td>896-6289 Lectus. Road</td>
                                        <td>6703</td>
                                        <td>Van</td>
                                    </tr>
                                    <tr>
                                        <td>Vivian Kidd</td>
                                        <td>(757) 153-4279</td>
                                        <td>[email protected]</td>
                                        <td>832-7003 Dapibus Street</td>
                                        <td>28583</td>
                                        <td>Donetsk oblast</td>
                                    </tr>
                                    <tr>
                                        <td>Guinevere Larson</td>
                                        <td>(915) 759-9956</td>
                                        <td>[email protected]</td>
                                        <td>Ap #291-8503 Mi Rd.</td>
                                        <td>9446-5214</td>
                                        <td>Ancash</td>
                                    </tr>
                                    <tr>
                                        <td>Kyle Moody</td>
                                        <td>1-851-573-7506</td>
                                        <td>[email protected]</td>
                                        <td>9419 At, Road</td>
                                        <td>968428</td>
                                        <td>Hà Nội</td>
                                    </tr>
                                    <tr>
                                        <td>Omar Rocha</td>
                                        <td>(562) 410-3857</td>
                                        <td>[email protected]</td>
                                        <td>6292 Lacinia Street</td>
                                        <td>4517</td>
                                        <td>Gyeonggi</td>
                                    </tr>
                                    <tr>
                                        <td>Olga Delgado</td>
                                        <td>(366) 233-5748</td>
                                        <td>[email protected]</td>
                                        <td>P.O. Box 353, 5038 Velit. Av.</td>
                                        <td>47691-731</td>
                                        <td>Gilgit Baltistan</td>
                                    </tr>
                                    <tr>
                                        <td>Merritt Mcgee</td>
                                        <td>1-746-208-7317</td>
                                        <td>[email protected]</td>
                                        <td>808-1124 Aliquam St.</td>
                                        <td>3841</td>
                                        <td>West Region</td>
                                    </tr>
                                    <tr>
                                        <td>Justine Chavez</td>
                                        <td>(888) 536-1286</td>
                                        <td>[email protected]</td>
                                        <td>Ap #217-9908 Sapien, Rd.</td>
                                        <td>554736</td>
                                        <td>Valle d'Aosta</td>
                                    </tr>
                                    <tr>
                                        <td>Quyn Walsh</td>
                                        <td>(822) 642-5281</td>
                                        <td>[email protected]</td>
                                        <td>212-3356 Pharetra Road</td>
                                        <td>4453</td>
                                        <td>North Region</td>
                                    </tr>
                                    <tr>
                                        <td>Reagan England</td>
                                        <td>1-556-795-5815</td>
                                        <td>[email protected]</td>
                                        <td>861 Molestie. Ave</td>
                                        <td>I2 3CH</td>
                                        <td>Manisa</td>
                                    </tr>
                                    <tr>
                                        <td>Piper Trevino</td>
                                        <td>(317) 254-8265</td>
                                        <td>[email protected]</td>
                                        <td>P.O. Box 893, 102 Volutpat Ave</td>
                                        <td>442298</td>
                                        <td>Ivano-Frankivsk oblast</td>
                                    </tr>
                                    <tr>
                                        <td>Vielka Booker</td>
                                        <td>(912) 215-4856</td>
                                        <td>[email protected]</td>
                                        <td>P.O. Box 417, 7460 Erat. Rd.</td>
                                        <td>752788</td>
                                        <td>Lower Austria</td>
                                    </tr>
                                    <tr>
                                        <td>Bethany Morse</td>
                                        <td>(524) 275-7817</td>
                                        <td>[email protected]</td>
                                        <td>Ap #306-1993 Nunc, Rd.</td>
                                        <td>872317</td>
                                        <td>Khyber Pakhtoonkhwa</td>
                                    </tr>
                                    <tr>
                                        <td>Nigel Rodriquez</td>
                                        <td>(514) 539-8835</td>
                                        <td>[email protected]</td>
                                        <td>Ap #253-3593 Eleifend, Rd.</td>
                                        <td>632717</td>
                                        <td>Pembrokeshire</td>
                                    </tr>
                                    <tr>
                                        <td>Neve Wilder</td>
                                        <td>(606) 681-2475</td>
                                        <td>[email protected]</td>
                                        <td>174-9984 Tincidunt Rd.</td>
                                        <td>68-74</td>
                                        <td>Sakhalin Oblast</td>
                                    </tr>
                                    <tr>
                                        <td>Jin Bullock</td>
                                        <td>1-448-486-8858</td>
                                        <td>[email protected]</td>
                                        <td>Ap #368-1205 Eleifend, Rd.</td>
                                        <td>ER3K 9LR</td>
                                        <td>Sokoto</td>
                                    </tr>
                                    <tr>
                                        <td>Knox Brennan</td>
                                        <td>1-437-946-4747</td>
                                        <td>[email protected]</td>
                                        <td>660-8116 Duis Avenue</td>
                                        <td>50573</td>
                                        <td>West-Vlaanderen</td>
                                    </tr>
                                    <tr>
                                        <td>Griffin Guerra</td>
                                        <td>1-532-353-9877</td>
                                        <td>[email protected]</td>
                                        <td>Ap #981-1378 Magna St.</td>
                                        <td>30507</td>
                                        <td>Oaxaca</td>
                                    </tr>
                                    <tr>
                                        <td>Caldwell Alford</td>
                                        <td>(399) 426-9716</td>
                                        <td>[email protected]</td>
                                        <td>233-1455 Vel St.</td>
                                        <td>TN8D 5DO</td>
                                        <td>Guaviare</td>
                                    </tr>
                                    <tr>
                                        <td>Jenette Banks</td>
                                        <td>1-689-333-1734</td>
                                        <td>[email protected]</td>
                                        <td>Ap #930-7347 Natoque St.</td>
                                        <td>40522</td>
                                        <td>Guanajuato</td>
                                    </tr>
                                    <tr>
                                        <td>Keely Golden</td>
                                        <td>1-136-553-0827</td>
                                        <td>[email protected]</td>
                                        <td>1886 Purus St.</td>
                                        <td>876591</td>
                                        <td>Lorraine</td>
                                    </tr>
                                    <tr>
                                        <td>Brittany Jefferson</td>
                                        <td>1-254-510-4464</td>
                                        <td>[email protected]</td>
                                        <td>377 Fermentum Rd.</td>
                                        <td>R5S 0P4</td>
                                        <td>Bryansk Oblast</td>
                                    </tr>
                                    <tr>
                                        <td>Colette Daniel</td>
                                        <td>(623) 311-7056</td>
                                        <td>[email protected]</td>
                                        <td>6464 Magnis Avenue</td>
                                        <td>77209-17877</td>
                                        <td>Balochistan</td>
                                    </tr>
                                    <tr>
                                        <td>Thomas Leon</td>
                                        <td>(637) 570-3881</td>
                                        <td>[email protected]</td>
                                        <td>2008 Nec Rd.</td>
                                        <td>145881</td>
                                        <td>South Island</td>
                                    </tr>
                                    <tr>
                                        <td>Hedley Kirk</td>
                                        <td>1-343-525-8656</td>
                                        <td>[email protected]</td>
                                        <td>Ap #634-6047 Ipsum Rd.</td>
                                        <td>14881</td>
                                        <td>Magallanes y Antártica Chilena</td>
                                    </tr>
                                    <tr>
                                        <td>Nolan Cameron</td>
                                        <td>1-756-806-3531</td>
                                        <td>[email protected]</td>
                                        <td>4644 Tellus. Ave</td>
                                        <td>45884</td>
                                        <td>Jönköpings län</td>
                                    </tr>
                                    <tr>
                                        <td>Arden Pate</td>
                                        <td>1-335-356-1881</td>
                                        <td>[email protected]</td>
                                        <td>P.O. Box 486, 238 Pellentesque, Avenue</td>
                                        <td>65098</td>
                                        <td>Chernivtsi oblast</td>
                                    </tr>
                                    <tr>
                                        <td>Nasim Pace</td>
                                        <td>1-450-872-9114</td>
                                        <td>[email protected]</td>
                                        <td>651-397 Habitant Road</td>
                                        <td>16238</td>
                                        <td>Provence-Alpes-Côte d'Azur</td>
                                    </tr>
                                    <tr>
                                        <td>Gannon Ayala</td>
                                        <td>(736) 171-8754</td>
                                        <td>[email protected]</td>
                                        <td>Ap #861-6258 Consectetuer Street</td>
                                        <td>584451</td>
                                        <td>Mizoram</td>
                                    </tr>
                                    <tr>
                                        <td>Francesca Roman</td>
                                        <td>1-646-242-3444</td>
                                        <td>[email protected]</td>
                                        <td>P.O. Box 733, 8323 Commodo Av.</td>
                                        <td>8599</td>
                                        <td>Ninh Bình</td>
                                    </tr>
                                    <tr>
                                        <td>Isaac Deleon</td>
                                        <td>(629) 282-7534</td>
                                        <td>[email protected]</td>
                                        <td>Ap #170-6859 Quisque Rd.</td>
                                        <td>15026</td>
                                        <td>Møre og Romsdal</td>
                                    </tr>
                                    <tr>
                                        <td>Phillip Sharpe</td>
                                        <td>1-979-794-8245</td>
                                        <td>[email protected]</td>
                                        <td>9163 Amet, Ave</td>
                                        <td>6753-6874</td>
                                        <td>Tasmania</td>
                                    </tr>
                                    <tr>
                                        <td>Xantha Rollins</td>
                                        <td>(688) 304-2656</td>
                                        <td>[email protected]</td>
                                        <td>4230 Sed Street</td>
                                        <td>22066</td>
                                        <td>Styria</td>
                                    </tr>
                                    <tr>
                                        <td>William O'donnell</td>
                                        <td>(315) 447-9643</td>
                                        <td>[email protected]</td>
                                        <td>643-9312 Dis Av.</td>
                                        <td>84807-17053</td>
                                        <td>North Island</td>
                                    </tr>
                                    <tr>
                                        <td>Skyler Travis</td>
                                        <td>(136) 280-5435</td>
                                        <td>[email protected]</td>
                                        <td>553-4413 Consequat St.</td>
                                        <td>q7E 5R9</td>
                                        <td>Cagayan Valley</td>
                                    </tr>
                                    <tr>
                                        <td>Cody Morgan</td>
                                        <td>1-902-254-4752</td>
                                        <td>[email protected]</td>
                                        <td>Ap #929-826 Nec Avenue</td>
                                        <td>R6A 6T7</td>
                                        <td>Sachsen-Anhalt</td>
                                    </tr>
                                    <tr>
                                        <td>Geoffrey Morales</td>
                                        <td>(868) 574-3036</td>
                                        <td>[email protected]</td>
                                        <td>176-4504 Bibendum. Avenue</td>
                                        <td>567041</td>
                                        <td>Bedfordshire</td>
                                    </tr>
                                    <tr>
                                        <td>Lysandra Bond</td>
                                        <td>(747) 608-4473</td>
                                        <td>[email protected]</td>
                                        <td>Ap #649-8684 In Av.</td>
                                        <td>18664</td>
                                        <td>Murcia</td>
                                    </tr>
                                    <tr>
                                        <td>Edan Bridges</td>
                                        <td>1-357-914-8027</td>
                                        <td>[email protected]</td>
                                        <td>500-6626 Scelerisque Street</td>
                                        <td>Y2W 1A7</td>
                                        <td>Catalunya</td>
                                    </tr>
                                    <tr>
                                        <td>Liberty Estes</td>
                                        <td>1-231-159-1113</td>
                                        <td>[email protected]</td>
                                        <td>469-2250 Metus Rd.</td>
                                        <td>P46 6BF</td>
                                        <td>Leinster</td>
                                    </tr>
                                    <tr>
                                        <td>Britanney Stone</td>
                                        <td>(852) 889-0227</td>
                                        <td>[email protected]</td>
                                        <td>751-3959 Orci, Street</td>
                                        <td>32452</td>
                                        <td>Lorraine</td>
                                    </tr>
                                    <tr>
                                        <td>Libby Chavez</td>
                                        <td>(686) 188-2576</td>
                                        <td>[email protected]</td>
                                        <td>537-556 Quisque St.</td>
                                        <td>31344-76127</td>
                                        <td>Dōngběi</td>
                                    </tr>
                                    <tr>
                                        <td>Madison Odom</td>
                                        <td>1-442-211-1767</td>
                                        <td>[email protected]</td>
                                        <td>Ap #579-4446 Suspendisse St.</td>
                                        <td>284283</td>
                                        <td>Alsace</td>
                                    </tr>
                                    <tr>
                                        <td>Matthew Maynard</td>
                                        <td>(218) 148-3643</td>
                                        <td>[email protected]</td>
                                        <td>Ap #778-842 Diam. St.</td>
                                        <td>13417</td>
                                        <td>Lakshadweep</td>
                                    </tr>
                                    <tr>
                                        <td>Nicholas Vinson</td>
                                        <td>1-283-692-7461</td>
                                        <td>[email protected]</td>
                                        <td>827-4740 Nulla Road</td>
                                        <td>1341</td>
                                        <td>Punjab</td>
                                    </tr>
                                    <tr>
                                        <td>Orson Sweeney</td>
                                        <td>(585) 243-8548</td>
                                        <td>[email protected]</td>
                                        <td>Ap #563-9840 Ac, St.</td>
                                        <td>60155</td>
                                        <td>Vienna</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
<footer class="container-fluid py-3" style="background:#495C83; color:#fff">
    <div class="container-fluid my-2">
        <div class="text-center">
            <b>HTML Table Search Filter &copy; 2023</b>
        </div>
    </div>
</footer>
<script src="./script.js"></script>
</body>
</html>

Step 2: Creating the JavaScript

The following script is the main script that makes the search filter feature functional. This file is included on the page interface script.

const searchField = document.getElementById('search')
const sampleTblContent = document.querySelector('#sampleTbl tbody')
 
window.onload = function(){
    console.log("searchTxt")
 
    searchField.addEventListener("input", searchRow)
    searchField.addEventListener("change", searchRow)
}
 
window.searchRow = function(e){
    e.preventDefault()
    var searchTxt = (searchField.value).toLowerCase();
    sampleTblContent.querySelectorAll("tr").forEach(el => {
        var rowTxt = (el.innerText).toLowerCase();
            // console.log(rowTxt.includes(searchTxt))
        if(rowTxt.includes(searchTxt) === false && searchTxt !== ""){
            // console.log(rowTxt)
            el.style.display = 'none'
        }else{
            el.style.display = 'table-row'
        }
    })
}

Result

Here's the following snapshot of the result of the page interface.

That's it! You can now test the application on your end and check if it works properly and achieves the main objective of this tutorial. I have provided the source code zip file on this website and is free to download. The download button is located below this article.

That's the end of this tutorial. I hope this HTML Table Search Filter using JavaScript Tutorial will help you with what you are looking for and that you'll find this useful for your current and future web applications.

Explore more on this web application for more Tutorials and Free Source Codes.

Happy Coding =)

Add new comment

624 views