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> 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"; } } } } 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> 
Top comments (0)