jQuery условие поиска в h2 и элемент списка статьи

Question

Я должен потерпеть неудачу с чем-то действительно очевидным. Вот так выглядит мой маленький jquery поиск статей

$(document).ready(function(){

  var mySearchTimeout;
  $('.js-search-bar').keyup(function(e) {
    clearTimeout(mySearchTimeout);
    var query = $.trim($(this).val()).toLowerCase().toString();
    console.log(query)
    var el = $(this).attr('data-search');


    mySearchTimeout = setTimeout(function () {

      $(el).each(function() {
        var $this = $(this);
        if ($this.text().toLowerCase().indexOf(query) === -1) $this.parents('.searchable').fadeOut("fast");
        else $this.parents('.searchable').fadeIn("fast");
      });

     }, 700);
    return true;
  });
});

article {
  border: 10px solid #ccc;
  margin: 40px;
  padding: 10px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="js-search-bar" data-search=".searchable h2, .searchable .js_reference">
<article class="searchable">
  <h2>Dog</h2>
  <ul>
    <li class="js_reference"><a href="/programm/k2020/">3030 house a home</a></li>
    <li class="js_reference"><a href="/programm/k2020/kind-event/">phase 1</a></li>
    <li class="js_reference"><a href="/programm/k2020/phase-2/">phase 2</a></li>
  </ul>
</article>

<article class="searchable">
  <h2>Mouse</h2>
  Other text
</article>

Перо здесь: https://codepen.io/t-book/pen/VwvKWJg

Доступны для поиска h2 и элементы списка. Я могу искать Mouse или Phase, но Dog или 3030 не удается. Я думаю, что-то не так с моим .parents ().

Как мне нужно изменить свой код, чтобы в случае, если в h2 была найдена строка поиска или элемент списка, родительская статья была бы скрыта?

РЕДАКТИРОВАТЬ: Решено с: https://codepen.io/t-book/pen/VwvKWJg?editors=1010