[Cresis]

Привет, есть поиск по таблице:Ссылка на кодепен
При вводе текста, который соответствует тексту в таблице, все остальные строчки обрезаются.
Суть в том, что по мимо обычных строчек, есть "категории"(строка на 4 колонки):

<tr> <td colspan="4" style="text-align:center; text-decoration:underline;">Категория 1</td> </tr>

Нужно что бы по мимо результатов, выводилась соответствующая результату категория, т.е строка на 4 колонки которая находится выше результата.
Как нибудь это можно реализовать?

Код:

$(document).ready(function() {
  $(".search").keyup(function () {
    var searchTerm = $(".search").val();
    var listItem = $('.results tbody').children('tr');
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
    
  $.extend($.expr[':'], {'containsi': function(elem, i, match, array){
        return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
  });
    
  $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e){
    $(this).attr('visible','false');
  });

  $(".results tbody tr:containsi('" + searchSplit + "')").each(function(e){
    $(this).attr('visible','true');
  });

  var jobCount = $('.results tbody tr[visible="true"]').length;
    $('.counter').text(jobCount + ' результат(ов)');

  if(jobCount == '0') {$('.no-result').show();}
    else {$('.no-result').hide();}
		  });
});

Разметка таблицы(Таблица на бутстрапе, но это не важно)

<div class="form-group pull-right">
<input type="text" class="search form-control" placeholder="What you looking for?">
</div>
<span class="counter pull-right"></span>
<table class="table table-hover table-bordered results">
  <thead>
    <tr>
      <th>#</th>
      <th class="col-md-5 col-xs-5">Name / Surname</th>
      <th class="col-md-4 col-xs-4">Job</th>
      <th class="col-md-3 col-xs-3">City</th>
    </tr>
    <tr class="warning no-result">
      <td colspan="4"><i class="fa fa-warning"></i> No result</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Vatanay Özbeyli</td>
      <td>UI & UX</td>
      <td>Istanbul</td>
    </tr>
    <tr> <td colspan="4" style="text-align:center; text-decoration:underline;">Категория 1</td> </tr>
    <tr>
      <th scope="row">2</th>
      <td>Burak Özkan</td>
      <td>Software Developer</td>
      <td>Istanbul</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Egemen Özbeyli</td>
      <td>Purchasing</td>
      <td>Kocaeli</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Engin Kızıl</td>
      <td>Sales</td>
      <td>Bozuyük</td>
    </tr>
  </tbody>
</table>