Question

很抱歉没有输入我已经处理过的代码。这次我清楚地解释了我的疑问。我有一个由嵌套的ul和li标签组成的树。树节点名称是从数据库中获取的。我需要根据我在文本框中输入的名称过滤树。在显示已过滤的树项目时，如果过滤的项目是父节点，则还应列出子节点（尽管它们与在texbox中输入的文本不匹配）。我已提到此链接：
Filter multiple <ul> lists with jQuery

此链接帮助我通过在文本框中输入其名称来过滤掉树节点。但它的子节点不可见。请帮助我。请在下面找到我的代码：

function func(){
	alert("Onclick function parent node...");}

function func1(){
	alert("Onclick function child node...");}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
	$(document).ready(function() {

	$('input[type="text"]').keyup(function(){

    var filter = jQuery(this).val();
    jQuery("ul li").each(function () {
        if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
            jQuery(this).hide();
        } else {
            jQuery(this).show();
            jQuery(this).children().show();
        }
    });    
    });

});
</script>
</head>

<body>
	<input type="text" />

<ul class="mainlayer" id="category1">
    <li class="layer1"><a href="#" onclick="func();">item1</a>
      <ul>
        <li class="layer2"><a href="#"  onclick="func1();">hju11</a></li>
        <li class="layer2"><a>kiu12</a></li>
      </ul>
    </li>
    <li class="layer1"><a>item2</a></li>
    <li class="layer1"><a> item3</a></li>
</ul>
</body>
</html>

提前致谢。

Answer 1

尝试这样的事情：

function func(){
	alert("Onclick function parent node...");}

function func1(){
	alert("Onclick function child node...");}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <style>
    .hide{
      display:none;
    }
    </style>
<script>
	$(document).ready(function() {

	$('input[type="text"]').keyup(function(){

    var filter = jQuery(this).val();
      jQuery(".menu ul > li").removeClass("hide");
      jQuery(".menu ul > li").removeClass("show");
      
        jQuery(".menu ul > li").each(function () {
           if (jQuery(this).text().search(new RegExp(filter, "i")) < 0 && !jQuery(this).hasClass('show')) {
            jQuery(this).addClass('hide');
           } else {
            jQuery(this).addClass('show');
            jQuery(this).find(' ul > li').addClass('show');
          
           }
       });       
    });

});
</script>
</head>

<body>
	<input type="text" />

  <div class="menu">
      <ul class="mainlayer" id="category1">
        <li class="layer1"><a href="#" onclick="func();">item1</a>
          <ul>
            <li class="layer2"><a href="#"  onclick="func1();">hju11</a></li>
            <li class="layer2"><a>kiu12</a></li>
          </ul>
        </li>
        <li class="layer1"><a>item2</a></li>
        <li class="layer1"><a> item3</a></li>
      </ul>
    </div>
</body>
</html>

<强>更新

更新后的代码段，您可以根据需要更改.menu课程

Answer 2

您可以使用以下jQuery

$(document).ready(function() 
{
$('input[type="text"]').keyup(function() 
{

    var filter = jQuery(this).val();
    jQuery("ul li.layer1").each(function() 
    {
    if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) 
    {
        jQuery(this).hide();
    } 
    else 
    {
        jQuery(this).show();

        jQuery(this).children().show();
        var found = false;
        jQuery(this).find("li.layer2").each(function(i,obj) 
        {

        if ($(obj).text().search(new RegExp(filter, "i")) < 0) 
        {
            $(obj).hide();
            jQuery(obj).closest('.layer1').show();
        }
        else 
        {
            $(obj).show();
            found = true;
        }

        });
        if(found==false)
        {
        jQuery(this).find("li.layer2").show();
        }
    }


    });
});

});

Answer 3

我从很多开发者那里得到了很多帮助。谢谢大家的支持和有用的答案..请找到其中一个让我感觉更容易的人......

不是像这样检查，而是 jQuery（“ul li”）。each（function（）{}
检查为：
jQuery（“。mainlayer＆gt; li”）。each（function（）{}
这样子节点是可见的，相关的功能应该工作...... 再次感谢大家的有用答案..快乐的编码！

过滤由嵌套<ul> <li>和子节点组成的树视图

3 个答案: