使用文本输入过滤列表 - 嵌套列表未显示？

Question

我正在尝试使用 keyup 文本输入过滤特定 LI 的 UL。问题是，LI 嵌套在树中，过滤器只能看到最顶部的 LI，并且似乎没有正确过滤。输入宾夕法尼亚州应该只显示宾夕法尼亚州，上面什么都没有。有任何想法吗？提前致谢。

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

    });     
}); 

Answer 1

如果您不想更改 html，可以将 .toggle() 更改为 .css("visibility")

$('.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/
这只会显示实际的“li”
要删除 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

注意：这会造成大量的 dom 操作......请注意与之相关的成本

据我了解，你需要改变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)
    })

});