表格中的JavaScript实时搜索也显示更高的行

Question

我有以下工作代码，用JavaScript搜索HTML表格，突出显示结果并隐藏不匹配的行：

'use strict';

;
(function($, window, document, undefined) {
  var $container = $('.main');
  if (!$container.length) return true;

  var $input = $container.find('input'),
    $notfound = $container.find('.notfound'),
    $items = $container.find(' > table > tbody > tr'),
    $item = $(),
    itemsIndexed = [];

  $items.each(function() {
    itemsIndexed.push($(this).text().replace(/\s{2,}/g, ' ').toLowerCase());
  });

  $input.on('keyup', function(e) {
    if (e.keyCode == 13) // enter
    {
      $input.trigger('blur');
      return true;
    }

    $items.each(function() {
      $item = $(this);
      $item.html($item.html().replace(/<span class="highlight">([^<]+)<\/span>/gi, '$1'));
    });

    var searchVal = $.trim($input.val()).toLowerCase();
    if (searchVal.length) {
      for (var i in itemsIndexed) {
        $item = $items.eq(i);
        if (itemsIndexed[i].indexOf(searchVal) != -1)
          $item.removeClass('is-hidden').html($item.html().replace(new RegExp(searchVal + '(?!([^<]+)?>)', 'gi'), '<span class="highlight">$&</span>'));
        else
          $item.addClass('is-hidden');
      }
    } else $items.removeClass('is-hidden');

    $notfound.toggleClass('is-visible', $items.not('.is-hidden').length == 0);
  });
})(jQuery, window, document);

.highlight {
  background-color: #fffd77;
}

.is-hidden {
  display: none;
}

.notfound {
  font-size: 20px;
  font-style: italic;
  text-align: center;
  display: none;
}

.notfound.is-visible {
  display: block;
}

.boldtitle {
  font-weight: bold;
  color: red;
}

.table_details {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <input autofocus="" style="width:95%;height:40px;font-size:20px;margin-bottom:5px;margin-left:auto;margin-right:auto;display:block;" type="search" value="">

  <table>
    <tr>
      <td colspan="3" class="left">
        <p class="boldtitle">Cars</p>
      </td>
    </tr>

    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">GM</a><span class="link_company">GM</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>

    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">VW</a><span class="link_company">VW</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>

    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Opel</a><span class="link_company">Opel</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>

    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">BMW</a><span class="link_company">BMW</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>


    <tr>
      <td colspan="3" class="left">
        <p class="boldtitle">Fruits</p>
      </td>
    </tr>

    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Apple</a><span class="link_company">Apple</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>

    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Banana</a><span class="link_company">Banana</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>

    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Plump</a><span class="link_company">Plump</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>


    <tr>
      <td colspan="3" class="left">
        <p class="boldtitle">Names</p>
      </td>
    </tr>

    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">George</a><span class="link_company">George</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>

    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Harry</a><span class="link_company">Harry</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>

    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Peter</a><span class="link_company">Peter</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>

    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">David</a><span class="link_company">David</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
  </table>


  <div class="notfound">Nothing found!</div>

</div>

我想要达到的目的：实际上当我搜索例如Apple，我明白了：

但是我希望在这种情况下显示标题Fruits，如下所示：