javascript - 带有简单过滤器的菜单树

Question

我有一个左侧菜单树，它的节点太多，直到第一级，所以我想使用 java 脚本在树节点中实现搜索。如果有人在搜索框中键入查询，则只有在扩展树中包含键入的文本查询时，才会显示根和第一级的所有节点。像这样的东西：

树结构：

<input type="text" id="query" name="query">

    <ul id="sitemap">
          <li><a href="#">Places</a>
            <ul>
                <li><a href="#">Mercury</a></li>
                <li><a href="#">Venus</a></li>
                <li><a href="#">Earth</a></li>
            </ul>                   
        </li>

        <li><a href="#">Google</a>
            <ul>
                <li><a href="#">Search</a></li>
                <li><a href="#">News</a></li>
            </ul>                   
        </li>
            .
            .
            .
    </ul>

对于每个 onchange 事件，我是否必须创建一个新的原始子树并显示它，或者我可以隐藏原始树中不包含搜索文本的节点。有任何想法吗？

Answer 1

得到这个工作：

    $(document).ready(function(){
        $('input#query').keyup(function(){

            var query = $('input#query').val().toLowerCase();

            if(query!="")
            {

                $("#sitemap li ul").show();


                var children = $("#sitemap li ul li a");
                for(var i=0; i<children.length; i++) {
                    //alert(children[i].parentNode.innerHTML);
                    if(children[i].innerHTML.toLowerCase().indexOf(query) == -1){
                        children[i].parentNode.style.display = "none";
                    }else{
                        children[i].parentNode.style.display = "block";
                    }                               
                }
            }else{

                $("#sitemap li ul").hide();


                var children = $("#sitemap li ul li a");
                for(var i=0; i<children.length; i++) {
                            children[i].parentNode.style.display = "block";

                }

            }
        });
    });