过滤多级列表

Question

我有一个深度嵌套的列表（10个级别），我想要过滤该列表，以便我可以获取我搜索的<li>，如果<li>有孩子我想要同时展示它们，这是一个代码示例...

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在上面的例子中，我设法得到了我搜索过的<li>，但我无法弄清楚如果他有孩子的话可以看到并打开它。

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

Answer 1

好:)只添加

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

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

        } 

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;