Hide Table Row's Containing Hyperlink Text Until Searched

Question

So I wrote most of the program already but I essentially need the table to not take up any space and remain hidden until someone searches something that is on the list. All the items in the rows are hyperlinks and therefore must remain part of the HTML. Would like the search bar to still update in real time like it is now; so when you search just "sup" the row containing "supreme" should already populate and show up.

For Example: all rows should remain hidden and when you search "supreme" only the row containing supreme should come up.

 function myFunction() { var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; display = "block"; } else { tr[i].style.display = "none"; } } } } 

 * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; } 

 <h2>Search Contracts Library</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for contracts.." title="Type in a name"> <div id="myDIV"> <table id="myTable"> <td><a href="https://www.w3schools.com/html/" target="_blank">nike</a> </td> <td>Germany</td> </tr> <tr> <td><a href="https://www.w3schools.com/html/" target="_blank">yeezy</a> </td> <td>Sweden</td> </tr> <tr> <td><a href="https://www.w3schools.com/html/" target="_blank">adidas</a> </td> <td>UK</td> </tr> <tr> <td><a href="https://www.w3schools.com/html/" target="_blank">supreme</a> </td> <td>Italy</td> </tr> <tr> <td><a href="https://www.w3schools.com/html/" target="_blank">palace</a> </td> <td>UK</td> </tr> <tr> <td><a href="https://www.w3schools.com/html/" target="_blank">vans</a> </td> <td>France</td> </tr> </table> </div> 

Answer 1

Just give the tr sa display of none initially, and then iterate through each tr every time the input is changed:

 function myFunction() { const filterBy = document.querySelector('#myInput').value.toLowerCase().trim(); document.querySelectorAll('#myTable tr') .forEach((tr) => { if (filterBy && tr.children[0].textContent.toLowerCase().includes(filterBy)) { tr.style.display = 'block'; } else tr.style.display = 'none'; }); } 

 * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { border-bottom: 1px solid #ddd; display: none; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; } 

 <h2>Search Contracts Library</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for contracts.." title="Type in a name"> <div id="myDIV"> <table id="myTable"> <td><a href="https://www.w3schools.com/html/" target="_blank">nike</a> </td> <td>Germany</td> </tr> <tr> <td><a href="https://www.w3schools.com/html/" target="_blank">yeezy</a> </td> <td>Sweden</td> </tr> <tr> <td><a href="https://www.w3schools.com/html/" target="_blank">adidas</a> </td> <td>UK</td> </tr> <tr> <td><a href="https://www.w3schools.com/html/" target="_blank">supreme</a> </td> <td>Italy</td> </tr> <tr> <td><a href="https://www.w3schools.com/html/" target="_blank">palace</a> </td> <td>UK</td> </tr> <tr> <td><a href="https://www.w3schools.com/html/" target="_blank">vans</a> </td> <td>France</td> </tr> </table> </div>