Searching Only From td table not from Header (th)

I can search from the entire table by using jquery and show only tr that match from search and it make header (th) gone. But i want it only search from table content. (Header stay and content that match show)

here my style

<style>
  td{border: 1px solid black}
</style>

here my html code

<input type="text" id="search" placeholder="Type to search">
<table id="tableAll">
  <tr>
     <th>Fruit name</th>
     <th>Color</th>
     <th>Notes</th>
  </tr>
   <tr>
      <td>Apple</td>
      <td>Green</td>
      <td>Delicious</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

here my Script

var $rows = $('#tableAll tr');
$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

  $rows.show().filter(function() {
      var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
      return !~text.indexOf(val);
  }).hide();
});

you can also click here for code it in jsfiddle