JSFiddle - React, Tailwind, and code Playground
HTML
Enter search terms: <input id="search-input" />
<ul class="search-tree">
<li>
<span>Root node</span>
<ul>
<li>
<span>One Child Node</span>
<ul>
<li><span>node 1</span></li>
<li><span>node 2</span></li>
<li><span>node 3</span></li>
</ul>
</li>
<li>
<span>Two Child Node</span>
<ul>
<li><span>node 4</span></li>
<li><span>node 5</span></li>
<li><span>node 6</span></li>
</ul>
</li>
</ul>
</li>
</ul>
JavaScript
function process(li, path) {
$.data($(li).get(0), 'path', path)
$(li).children("ul").each(function(jdx, ul) {
$(ul).children("li").each(function(idx, child_li) {
process($(child_li), path + " / " + $(child_li).children("span").text())
});
});
}
$(".search-tree li").each(function(idx, li) {
process($(li), $(li).children("span").text())
});
$("#search-input").keyup(function() {
// Hide everything to start with
$(".search-tree li").hide()
// Extract all the words from the search box
var words = $("#search-input").val().split(" ");
// Now go through the tree, and show <li>s that match the words
$(".search-tree").find("li").each(function(idx, li) {
// We only test the nodes, ie, the <li>s with no children
if ($(li).find("ul").length == 0) {
// Assume we will show the node...
var show = true;
// ...but decide to hide it if one of the words doesn't exist in the path
$(words).each(function(jdx, word) {
if ($.data($(li).get(0), 'path').indexOf(word) == -1) {
show = false
}
})
// If the verdict was show=true, show this node and its parents
if (show) {
$(li).show()
$(li).parents("li").show()
}
}
});
});