过滤多级列表答案

【问题标题】：Filter Multi-Level List过滤多级列表
【发布时间】：2017-01-15 15:55:48
【问题描述】：

我有一个嵌套很深的列表（10 级），我想过滤该列表，以便获得我搜索的 <li>，如果 <li> 有孩子，我也想显示他们, 下面是代码示例...

$(document).ready(function () {
    $("#filter").keyup(function () {
        var filter = $(this).val();
      
        $("li").each(function () {
            if (filter == "") {
                $(this).css("visibility", "visible");
                $(this).fadeIn();
            } else if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).css("visibility", "hidden");
                $(this).fadeOut();
            } else {
                $(this).css("visibility", "visible");
                $(this).fadeIn();
            }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text" />
<ul>
    <li>Tom</li>
    <li> <a>Peter</a>

        <ul>
            <li> <a>John</a>
                <ul>
                    <li> <a>Doe</a>

                        <ul>
                            <li> <a>Shia</a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a>Nicolas</a>

            </li>
            <li><a>Reem</a>

            </li>
        </ul>
    </li>
    <li><a>Danial</a>
        <ul>
            <li> <a>Adam</a>

            </li>
        </ul>
    </li>
</ul>

在上面的示例中，我设法获得了我搜索的<li>，但我不知道如何保持它的孩子可见并打开（如果有的话）。

注意：您不必重复使用我在此处发布的代码，如果可以，您可以发布更好、更灵活的实现。

【问题讨论】：

一旦找到匹配的正则表达式，您可能希望停止检查元素。我敢打赌，您可以使用nextUntil：api.jquery.com/nextUntil 以您想要的方式重写您的函数
你能给我看一个工作的例子吗？

标签： javascript nested-lists fuzzy-search jquery-filter

【解决方案1】：

好的 :) 只添加

         else if ($(this).text().search(new RegExp(filter, "i")) < 0) {

            if(!$(this).parent().parent().is('li')){
                $(this).css("visibility", "hidden");
                $(this).fadeOut();
            }

        }

【讨论】：

【解决方案2】：

$(document).ready(function () {
    
  
    $("#filter").keyup(function () {
        var filter = $(this).val();
      
        $("li").each(function () {
            if (filter == "") {
                $(this).css("visibility", "visible");
                $(this).fadeIn();
            } else if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).css("visibility", "hidden");
                $(this).fadeOut();
            } else {
                $(this).css("visibility", "visible");
                $(this).fadeIn();
            }
        });
    });
    
    $('.hasSub').click(function () {
    $(this).parent().toggleClass('subactivated');
		$(this).parent().children('ul:first').toggle();
    
    if($(this).find('i').hasClass('glyphicon-folder-open')){
      $(this).find('i').removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
    }else{
      $(this).find('i').removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');
    }
	}); 
  
});

.fordtreeview ul{
  display:none;
  margin: 15px -16px;
  list-style:none;
}

.fordtreeview ul.expanded{
  display:block;
}

.fordtreeview ul li{
  left:5px;
  margin-right:10px; 
  color: #333;
}

.fordtreeview > li:first-child{
  display:block !important;
}

.fordtreeview li,
.fordtreeview a{
  color: #333; 
  text-decoration:none; 
  cursor:pointer;
}

.fordtreeview i.glyphicon{
  margin-right:5px;
}

.subactivated,
.fordtreeview > li:not(:first-child):hover{
  background-color: #f5f5f5;
}

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text" />
<ul class="fordtreeview list-group col-md-2" >
 
    <li class="list-group-item"> <span class="hasSub"><i class="glyphicon glyphicon-folder-close"></i> Peter </span>

        <ul class="list-group ">
            <li class="list-group-item" > <a>John</a>    </li>
            <li class="list-group-item" ><a>Nicolas</a></li>
           
        </ul>
    </li>
    <li  class="list-group-item"><span class="hasSub"><i class="glyphicon glyphicon-folder-close"></i> Danial</span>
        <ul class="list-group " >
            <li class="list-group-item"> <a>Adam</a></li>
        </ul>
    </li>
 
</ul>

【讨论】：

这几乎是我已经拥有的，但不是我想要的。我想要的是，如果我搜索“彼得”并且“彼得”有孩子，我希望能够扩展“彼得”和他的孩子。