Javascript 如何使用CSS在UL LI树视图中搜索

我使用ulli渲染一棵树。父项不可选择，但单击复选框可以选择子项。默认情况下，树视图不展开。我正在尝试添加一个搜索功能，以便用户可以键入一个搜索条件，该条件在Sensive中是大小写的，tree将展开并通过突出显示结果来显示匹配

我有一个JS函数，但它似乎返回匹配的结果。如有任何建议，将不胜感激

HTML

  <div id="errorCodes">

    <ul class="treeview">
        <li class="collapsable">
            <div class="hitarea collapsable-hitarea"></div>

            Pipettor Aspiration Dispense

            <ul class="treeview" style="display: block;">
                <li>
                    <input id="error150011" type="checkbox" value="150011"></input>

                    Unknown Error

                </li>
                <li class="expandable"></li>

---

假设您想搜索与输入相邻的文本（而不是

输入

值），我已经将每个

输入

包装在

标签

中，并让脚本搜索它。此解决方案中进行了大量猜测工作，但以下内容可能有用：

$("#search_tree").click(function () {
    //close and unhighlight everything
        $(".opened, .highlighted").removeClass("opened highlighted");
    //Perform search
        var term = $('#plugins4_q').val().toLowerCase();
        //for case-insensitive searches we need to use a filter:
            $('#errorCodes li label').filter(function(){
                return $(this).text().toLowerCase().indexOf(term) > -1;
            })
        //highlight matches
            .addClass("highlighted")
        //open all ancestors
            .parents("li").addClass("opened");
});

---

我可以看到一个打字错误-li class=“collapsable”，但在你写的JS中，collapsable应该是搜索

输入值还是
li
文本？A会很有帮助的。为我工作。仅更改$（“#搜索树”）。单击（函数（）{to$（“#搜索树”）。onkeydown（函数（）{
$("#search_tree").click(function () {
    //close and unhighlight everything
        $(".opened, .highlighted").removeClass("opened highlighted");
    //Perform search
        var term = $('#plugins4_q').val().toLowerCase();
        //for case-insensitive searches we need to use a filter:
            $('#errorCodes li label').filter(function(){
                return $(this).text().toLowerCase().indexOf(term) > -1;
            })
        //highlight matches
            .addClass("highlighted")
        //open all ancestors
            .parents("li").addClass("opened");
});