Блог

 class tableLiveSearch {
  constructor(table, searchable) {
    this.table = table;
    this.searchable = searchable;
    this.hide_row_list = new Array();
  }
  updateTable(search_query) {
    this.hide_row_list = this.searchTable(search_query);
    this.showAllTableRows();
    this.hideTableRows();
  }
  searchTable(search_query) {
    var temporary_list = new Array();
    var $searchable_items = $(this.table   ' '   this.searchable);

    $searchable_items.each(function(index, value) {
      var $this_element = $(this);
      search_query = search_query.toLowerCase();
      var search_content = $this_element.text().toLowerCase();
      if (search_content.indexOf(search_query) == -1)
        temporary_list.push($this_element.parent());

    });

    return temporary_list;
  }
  showAllTableRows() {
    $(this.table   ' '   this.searchable).each(function(index, value) {
      $(this).parent().show();
    });
  }
  hideTableRows() {
    $.each(this.hide_row_list, function(index, value) {
      $(this).hide();
    });
  }
}

var searchtable = new tableLiveSearch('.search-table', '.searchable');
$('#search').keyup(function() {
  searchtable.updateTable($(this).val());
  //remove class from tbody and thead
  $("thead , tbody").removeClass('display-hide')
  //loop through table
  $("table.search-table").each(function() {
    //check if the length is (hide or show
    $(this).find("tbody tr:visible").length == 0 ? $(this).find("thead , tbody").addClass('display-hide') : $(this).find("thead , tbody").removeClass('display-hide')
  })

}); 

 .display-hide {
  display: none;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container mt-5">
  <div class="row mt-5">
    <div class="col-12 mt-4">
      <form class="form">
        <input class="form-control" id="search" type="search" placeholder="Search a name..." aria-label="Search">
      </form>
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <table class="table search-table">
        <thead>
          <tr>
            <th>Item Name</th>
            <th>Cost</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="searchable">Stackoverflow</td>
            <td>33</td>
          </tr>
          <tr>
            <td class="searchable">Google</td>
            <td>2</td>
          </tr>
          <tr>
            <td class="searchable">Twitter</td>
            <td>2</td>
          </tr>
        </tbody>
      </table>
      <table class="table search-table">
        <thead>
          <tr>
            <th>Item Name</th>
            <th>Cost</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="searchable">Apple</td>
            <td>345</td>
          </tr>
          <tr>
            <td class="searchable">Banana</td>
            <td>34</td>
          </tr>
          <tr>
            <td class="searchable">Orange</td>
            <td>87</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>