Поиск по li со вложенностью jq

Есть список, у списка есть неограниченная вложенность, нужно сделать поиск по тексту в li
Вот, что сейчас получилось

$(document).ready(function(){
  $("#name").keyup(function(){
    _this = this;
    var count = 0;
    $.each($(".menu li"), function() {
      if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1) {
        $(this).hide();
      } else {
        count+=1;
        $(this).show();
      }
    });
    $('#count').html(count);
  });
  
  $(".pluse").click(function () {
    if($(this).hasClass('active')) {
      $(this).removeClass('active');
      $(this).parent().find('ul').filter( ':first' ).removeClass('active');
      $(this).parent().css('background', '#f8f9fa');
    } else {
      $(this).addClass('active');
      $(this).parent().css('background', '#dddddd');
      $(this).parent().find('ul').filter( ':first' ).addClass('active');
    }
  });

});
.menu {
    margin-bottom: 0;
    padding: 0;
    list-style: none;
    display: none;
}
.menu.active {
    display: block;
}
.menu li {
    position: relative;
    background: #f8f9fa;
    transition: .5s;
}
.menu li a {
    display: block;
    padding: 9px 2rem;
    border-bottom: 1px solid;
}
.pluse {
    position: absolute;
    top: 0;
    font-size: 33px;
    font-weight: bolder;
    left: 3px;
    cursor: pointer;
    z-index: 2;
    transform: rotateZ(0deg);
    transition: .3s;
}
.pluse.active {
    transform: rotateZ(48deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Найдено: <span id="count">0</span> <br>
<input type="text" id="name" autocomplete="off">
<ul class="menu active">
    <li>
        <a href="/"> 1</a>
        <div class="pluse">+</div>
            <ul class="menu">
            <li>
                <a href="/"> -  2</a>
                <div class="pluse">+</div>
                <ul class="menu">
                    <li>
                        <a href="/"> -  -  3</a>
                        <div class="pluse">+</div>
                        <ul class="menu">
                            <li>
                                <a href="/"> -  -  -  4</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Не могу понять, как сделать раскрытие списка, если найденный результат находиться в самом конце вложенности


Ответы (1 шт):

Автор решения: nicolaa

Решил задачу так:

$(document).ready(function(){
  $("#name").keyup(function(){
      $("#haiz").removeHighlight();
      _this = this;
      var count = 0;
      if($(this).val().length) {
          $.each($(".menu li a"), function() {
              if($(this).parent().text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1) {
                  $(this).parent().hide();
              } else {
                  var searchTerm = $(_this).val(),
                  searchRegex  = new RegExp(searchTerm, 'gi'),
                  val,
                  new_val;
                  
                  val = $(this).text();
                  new_val = val.replace( searchRegex, '<span class="highlight">'+searchTerm+'</span>' );
                  if ( new_val !== val ) {
                      if ( /</.test( new_val ) ) {
                          $(this).html(new_val);
                      }
                  }
                  count+=1;
                  $(this).parent().show().parents('ul').addClass('active').parent().find('.pluse').addClass('active');
              }
          });
      } else {
          $('.f').addClass('active').find('li').show();
          $('.p').removeClass('active');
          $.each($(".menu li"), function() {
              count+=1;
          });
      }
      $('#count').html(count);
  });

  $(".menu-rubrik-pluse").click(function () {
      if($(this).hasClass('active')) {
          $(this).removeClass('active');
          $(this).parent().find('ul').filter( ':first' ).removeClass('active');
          $(this).parent().css('background', '#f8f9fa');
      } else {
          $(this).addClass('active');
          $(this).parent().css('background', '#dddddd');
          $(this).parent().find('ul').filter( ':first' ).addClass('active');
      }
  });

  jQuery.fn.removeHighlight = function() {
      return this.find("span.highlight").each(function() {
          with (this.parentNode) {
              replaceChild(this.firstChild, this);
          }
      }).end();
  };

});
.menu {
    margin-bottom: 0;
    padding: 0;
    list-style: none;
    display: none;
}
.menu.active {
    display: block;
}
.menu li {
    position: relative;
    background: #f8f9fa;
    transition: .5s;
}
.menu li a {
    display: block;
    padding: 9px 2rem;
    border-bottom: 1px solid;
}
.pluse {
    position: absolute;
    top: 0;
    font-size: 33px;
    font-weight: bolder;
    left: 3px;
    cursor: pointer;
    z-index: 2;
    transform: rotateZ(0deg);
    transition: .3s;
}
.pluse.active {
    transform: rotateZ(48deg);
}
.highlight {
    background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Найдено: <span id="count">0</span> <br>
<input type="text" id="name" autocomplete="off">
<div id="haiz">
<ul class="menu active f">
    <li>
        <a href="/"> 1</a>
        <div class="pluse p">+</div>
            <ul class="menu p">
            <li>
                <a href="/"> -  2</a>
                <div class="pluse p">+</div>
                <ul class="menu p">
                    <li>
                        <a href="/"> -  -  3</a>
                        <div class="pluse p">+</div>
                        <ul class="menu p">
                            <li>
                                <a href="/"> -  -  -  4</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

Еще захотелось выделить найденные совпадения, сделал по статье

→ Ссылка