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';
}
}
})