2

キーアップ テキスト入力で特定の 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="&#xe6b5;"></span>
    <span class="icon-location-7 md-moon white treeSpace" data-icon="&#xe6b5;"></span>Root
        <ul>
            <li data-expanded="true"><span class="icon-stack-6 md-moon delLtBlue treeSpace" data-icon="&#xe6a0;"></span>
            <span class="icon-stack-6 md-moon white treeSpace" data-icon="&#xe6a0;"></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="&#xe708;"></span>
                        <span class="icon-pie md-moon white treeSpace" data-icon="&#xe708;"></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);

    });     
}); 
4

2 に答える 2