If I search any child keyword it's working fine but, If I search any parent keyword and if the keyword matches, it should visible with their great grandparent, child and sub child in the hierarchy view. Can we do that.

<input type="text" class="bar_input" placeholder="Search">
    <ul class="myUL">
      <li><span class="caret">Beverages</span>
        <ul class="nested">
          <li>Water</li>
          <li>Coffee</li>
          <li><span class="caret">Tea</span>
            <ul class="nested">
              <li>Black Tea</li>
              <li>White Tea</li>
              <li><span class="caret">Green Tea</span>
                <ul class="nested">
                  <li>Sencha</li>
                  <li>Gyokuro</li>
                  <li>Matcha</li>
                  <li>Pi Lo Chun</li>
                </ul>
              </li>
            </ul>
          </li>  
        </ul>
      </li>
    </ul>

$('.bar_input').on('keyup',function(){
  var input = $('.bar_input').val().toLowerCase();
    var tags = $('.myUL li');
    var count = tags.length;
    $('.caret').addClass('caret-down');   $('.nested').addClass('active');

    for (i = 0; i < count; i++) {
        if (!input || tags[i].textContent.toLowerCase().indexOf(input) > -1) {
            tags[i].style['display'] = 'block';
        } else {
            tags[i].style['display'] = 'none';
        }
    }
})