How to display no data if the data is not in the list in jQuery Filter?

I have list of filter table with jQuery. If user is searching the data that existed in the table it will filter and displayed the data. But if user search data that not existed in the data I want to display the not found. How to I displayed the not found in the filter function ?

$(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>[e-mail]</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[e-mail]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[e-mail]</td>
  </tr>
  <tr>
    <td>Anja</td>
    <td>Ravendale</td>
    <td>[e-mail]</td>
  </tr>
  </tbody>
</table>

Answer

$(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>[e-mail]</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[e-mail]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[e-mail]</td>
  </tr>
  <tr>
    <td>Anja</td>
    <td>Ravendale</td>
    <td>[e-mail]</td>
  </tr>
  </tbody>
</table>