DEV Community

Cover image for Search and Filter items of table using pure JavaScript.
Technical Vandar
Technical Vandar

Posted on

Search and Filter items of table using pure JavaScript.

Here is the code for search and filter items from table
Simply HTML code to generate Table.


<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>Search and Filter Using JavaScript!</title>
</head>

<body>
    <div class="main w-50 my-4 py-4 m-auto">
        <input type="search" class="form-control" placeholder="Type Here To Search" id="inp" onkeyup="searchFunction()">
        <table id="table" class="my-4 py-4 table table-dark table-hover">
            <thead>
                <tr>
                    <th scope="col">S.no</th>
                    <th scope="col">Name</th>
                    <th scope="col">Profession</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Sudip</td>
                    <td>FullStack Web Developer</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Ram</td>
                    <td>Frontend Web Developer</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Ramesh</td>
                    <td>Backend Web Deveoper</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>Shyam</td>
                    <td>App Developer</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td>Hari</td>
                    <td>Graphics Designer</td>
                </tr>
                <tr>
                    <th scope="row">6</th>
                    <td>Arjun</td>
                    <td>Video Editor</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

This code generate simple search bar and table than we'll add JavaScript code to make this working
**

JS Code

function searchFunction() {
      // Declare variables
      var input, filter, table, tr, td, i, txtValue;
      input = document.getElementById("inp");
      filter = input.value.toUpperCase();
      table = document.getElementById("table");
      tr = table.getElementsByTagName("tr");

      // Loop through all table rows, and hide those who don't match the search query
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
    }
Enter fullscreen mode Exit fullscreen mode

JS code gives logic to do task

Final File index.html:


<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>Search and Filter Using JavaScript!</title>
</head>

<body>
    <div class="main w-50 my-4 py-4 m-auto">
        <input type="search" class="form-control" placeholder="Type Here To Search" id="inp" onkeyup="searchFunction()">
        <table id="table" class="my-4 py-4 table table-dark table-hover">
            <thead>
                <tr>
                    <th scope="col">S.no</th>
                    <th scope="col">Name</th>
                    <th scope="col">Profession</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Sudip</td>
                    <td>FullStack Web Developer</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Ram</td>
                    <td>Frontend Web Developer</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Ramesh</td>
                    <td>Backend Web Deveoper</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>Shyam</td>
                    <td>App Developer</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td>Hari</td>
                    <td>Graphics Designer</td>
                </tr>
                <tr>
                    <th scope="row">6</th>
                    <td>Arjun</td>
                    <td>Video Editor</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous"></script>
</body>
<script>
    function searchFunction() {
      // Declare variables
      var input, filter, table, tr, td, i, txtValue;
      input = document.getElementById("inp");
      filter = input.value.toUpperCase();
      table = document.getElementById("table");
      tr = table.getElementsByTagName("tr");

      // Loop through all table rows, and hide those who don't match the search query
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
    }
    </script>

</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)