Tengo una lista de tablas de filtros con jQuery. Si el usuario está buscando los datos que existían en la tabla, filtrará y mostrará los datos. Pero si el usuario busca datos que no existían en los datos, quiero mostrar los not found . ¿Cómo mostré lo not found en la función de filtro?
$(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="myInput" type="text" placeholder="Search.."> <br><br> <table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody id="myTable"> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@mail.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@greatstuff.com</td> </tr> <tr> <td>Anja</td> <td>Ravendale</td> <td>a_r@test.com</td> </tr> </tbody> </table> $(document).ready(function(){ // select notFound row var notFound = $("#notFound") // make it hidden by default notFound.hide() $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase() // select all items var allItems = $("#myTable tr") // get list of matched items, (do not toggle them) var matchedItems = $("#myTable tr").filter(function() { return $(this).text().toLowerCase().indexOf(value) > -1 }); // hide all items first allItems.toggle(false) // then show matched items matchedItems.toggle(true) // if no item matched then show notFound row, otherwise hide it if (matchedItems.length == 0) notFound.show() else notFound.hide() }); }); table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="myInput" type="text" placeholder="Search.."> <br><br> <table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody id="myTable"> <tr id="notFound"><td colspan="3">Not Found</td></tr> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@mail.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@greatstuff.com</td> </tr> <tr> <td>Anja</td> <td>Ravendale</td> <td>a_r@test.com</td> </tr> </tbody> </table>