JSFiddle - React, Tailwind, and code Playground
HTML
<input type='text' value='[Enter search term followed by Return]' class='allW treeSearch' />
<ul id="treeview">
<li data-expanded="true"><span class="icon-location-7 md-moon delBlue treeSpace" data-icon=""></span><span class="icon-location-7 md-moon white treeSpace" data-icon=""></span>Root<ul><li data-expanded="true"><span class="icon-stack-6 md-moon delLtBlue treeSpace" data-icon=""></span>
<span class="icon-stack-6 md-moon white treeSpace" data-icon=""></span>Gas Model<ul>
<li data-expanded="true"><span class="glyphicon glyphicon-globe md-moon delGreen treeSpace"></span>
<span class="glyphicon glyphicon-globe md-moon white treeSpace"></span>United States
<ul>
<li data-expanded="true"><span class="icon-pie md-moon delBlue treeSpace" data-icon=""></span>
<span class="icon-pie md-moon white treeSpace" data-icon=""></span>Pennsylvania
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
JavaScript
$('.treeSearch').click(function(){
$(this).val('');
});
$('.treeSearch').keyup(function(){
var searchText = $(this).val();
$('#treeview li').contents().filter(function() {
return this.nodeType == 3;
}).each(function(){
var currentLiText = $(this).text();
if(currentLiText.replace(/\s+/g, '')!=""){
if(currentLiText.indexOf(searchText) !== -1){
$(this).parent("li").css({"visibility": "visible"});
}
else{
$(this).parent("li").css({"visibility": "hidden"});
}
}
});
});