How to show message "no record found." if there's no record in table tbody using jquery filter function

I would like to show to message "No record found." if there's no result in table after searching. this is jsfiddle https://jsfiddle.net/jclaude/yxs8v1a9/2/

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>

<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>  
<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>

<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>

</body>
</html>

jQuery

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

CSS

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;
}

I tried to search about this filter function in jquery but unfortunately I don't have find any solution/similar to my problem. I also look on documentation https://api.jquery.com/filter/

Solution

Try this code below

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr:not('.no-records')").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    var trSel =  $("#myTable tr:not('.no-records'):visible")
    // Check for number of rows & append no records found row
    if(trSel.length == 0){
        $("#myTable").html('<tr class="no-records"><td colspan="3">No record found.</td></tr>')
    }
    else{
        $('.no-records').remove()
    }

  });
});

What we're doing here is checking if there are any visible rows, if no then we're appending a custom row which says no records else we're removing that custom row. Let me know if you have any doubts.

Checks the number of visible rows:

var trSel =  $("#myTable tr:not('.no-records'):visible")
trSel.length

Appends a row saying no records:

$("#myTable").html('<tr class="no-records"><td colspan="3">No record found.</td></tr>')

Removes the row which says no records

$('.no-records').remove()