the main issue is, when i search a list that is a parent and if i clicked that parent list it will not toggle the child of that list…
it should toggle the child when i clicked the matched parent list of the search result.
the search is real time it will automatically update the page.
document.addEventListener('DOMContentLoaded', function() {
const searchBox = document.getElementById('menuSearch');
// Toggle dropdowns manually
document.querySelectorAll('.shopMenuList li.has-children > span').forEach(toggle => {
toggle.addEventListener('click', function() {
const parentLi = this.parentElement;
parentLi.classList.toggle('open');
});
});
// Recursive filter function with toggleable matched items
function filterListItems(element, searchTerm) {
let matchFound = false;
// Check direct children <li>
const children = Array.from(element.children);
children.forEach(child => {
if (child.tagName === 'UL') {
const grandChildren = Array.from(child.children);
grandChildren.forEach(grandChild => {
const matched = filterListItems(grandChild, searchTerm);
matchFound = matchFound || matched;
});
}
});
const text = element.textContent.toLowerCase();
const isMatch = text.includes(searchTerm);
const shouldShow = isMatch || matchFound;
element.style.display = shouldShow ? '' : 'none';
element.classList.toggle('open', matchFound); // auto-expand matching
return shouldShow;
}
// Search input handler
searchBox.addEventListener('input', function() {
const filter = this.value.trim().toLowerCase();
const allRootItems = document.querySelectorAll('.shopMenuList > li');
allRootItems.forEach(item => {
filterListItems(item, filter);
});
// Toggle visibility of children if any match
document.querySelectorAll('.shopMenuList li.has-children').forEach(li => {
const hasVisibleChild = li.querySelector('ul > li:not([style*="display: none"])');
if (hasVisibleChild) {
li.classList.add('open');
} else {
li.classList.remove('open');
}
});
// Collapse all if search is empty
if (filter === '') {
document.querySelectorAll('.shopMenuList li.has-children').forEach(li => {
li.classList.remove('open');
});
}
});
});/*class that gets added to toggle lists when clicked*/
.open{
border: solid 1px;
background: dodgerblue;
}<input type="text" id="menuSearch" placeholder="Search category...">
<div class="shopMenuCategory">
<ul class="shopMenuList">
<li class="has-children"><span>Ceramic Tiles</span>
<ul>
<li class="has-children"><span>Floor Tiles</span>
<ul>
<li class="has-children"><span>15x80</span>
<ul>
<li><span>Matte</span></li>
</ul>
</li>
<li class="has-children"><span>15x90</span>
<ul>
<li><span>Matte</span></li>
</ul>
</li>
<li class="has-children"><span>20x20</span>
<ul>
<li><span>Matte</span></li>
</ul>
</li>
<li class="has-children"><span>20x100</span>
<ul>
<li><span>Matte</span></li>
</ul>
</li>
<li class="has-children"><span>20x120</span>
<ul>
<li><span>Matte</span></li>
</ul>
</li>
<li class="has-children"><span>30x30</span>
<ul>
<li><span>Matte</span></li>
<li><span>Glossy</span></li>
<li><span>Rough</span></li>
</ul>
</li>
<li class="has-children"><span>40x40</span>
<ul>
<li><span>Glossy</span></li>
<li><span>Matte</span></li>
<li><span>Rough</span></li>
</ul>
</li>
<li class="has-children"><span>60x60</span>
<ul>
<li><span>Glossy</span></li>
<li><span>Matte</span></li>
<li><span>Rough</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>when i search a parent list it will only display the matched parent list and the parent of that parent list which is correct… and then when i clicked the matched parent list it will not toggle the children is the issue..
example problem
ceramic tiles
floor tiles
30x40 - (searched list)
matte - (it doesnt display when the search list is toggled)
correct way
ceramic tiles
floor tiles
30x40 - (searched list) then (clicked to toggle the child)
matte - (it should display)
