キーアップ テキスト入力で特定の LI の UL をフィルタリングしようとしています。問題は、LI がツリー内にネストされており、フィルタが最上位の LI のみを認識し、正しくフィルタリングしていないように見えることです。Pennsylvania と入力すると、Pennsylvania のみが表示され、その上には何も表示されません。何か案は?前もって感謝します。
http://www.jsfiddle.net/CDAVZ/412
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>
jQuery
$('.treeSearch').click(function(){
$(this).val('');
});
$('.treeSearch').keyup(function(){
var searchText = $(this).val();
$('#treeview ul').each(function(){
var currentLiText = $(this).text(),
showCurrentLi = currentLiText.indexOf(searchText) !== -1;
$(this).toggle(showCurrentLi);
});
});