筛选多级列表

Question

我有一个嵌套很深的列表（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> ，但是我不知道如何保持其子项可见并打开（如果有）。

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

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

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