使用文本输入过滤LIs -嵌套LIs不显示？

Question

我试图过滤一个特定的LIs的UL与一个键盘文本输入。问题是，LIs嵌套在一棵树中，而过滤器只看到最上面的LI，并且似乎没有正确地过滤。输入宾州应该只显示宾夕法尼亚州，上面没有任何东西。有什么想法吗？提前谢谢。

http://www.jsfiddle.net/CDAVZ/412

<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);

    });     
}); 

Answer 1

如果不想更改html，可以将.toggle()更改为.css(“可见性”)

$('.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"});
        }
    }
});     
});    

http://jsfiddle.net/HLWMv/1/

这只会显示实际的“李”。

要删除if(currentLiText.replace(/\s+/g, '')!=""){部件，需要删除html中的额外空格和新行。

更新

大小写不敏感

$('.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().toLowerCase();
        if(currentLiText.indexOf(searchText.toLowerCase()) !== -1){
            $(this).parent("li").css({"visibility": "visible"});
        }
        else{
         $(this).parent("li").css({"visibility": "hidden"});
        }
});     
}); 

http://jsfiddle.net/HLWMv/2/

我删除了HTML中的空格

Answer 2

注:这使得广泛的操作.请注意与it相关的成本，

据我所理解，您需要对dom结构进行更改才能实现这一点。

$('.treeSearch').click(function () {
    $(this).val('');
});

RegExp.quote = function (str) {
    return (str + '').replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
};

$('#treeview li').each(function () {
    var $this = $(this);
    var text = $this.contents().map(function () {
        return this.nodeType == 3 && $.trim($(this).text()) != '' ? $.trim($(this).text()) : undefined;
    }).get().join(' ');

    $this.data('parent', $this.parent()).data('text', text);
})


$('.treeSearch').keyup(function () {

    var regex = new RegExp(RegExp.quote(this.value), 'i');

    var $selected = $('#treeview li').removeClass('selected').hide().filter(function () {
        return regex.test($(this).data('text'));
    }).addClass('selected').show();

    $selected.each(function () {
        var $this = $(this),
            $parent = $this.parent(),
            $ul = $this.data('parent');

        var $li = $this;
        while ($ul.is(':not(#treeview)') && !$ul.parent().hasClass('selected')) {
            $li = $ul.parent();
            $ul = $li.parent();
        }
        $this.appendTo($ul)
    })

});