Question

我使用UL LI渲染树。父母不可选择，但可以通过单击复选框选择孩子。默认情况下，树视图不会展开。我正在尝试添加搜索功能，以便用户可以键入搜索条件，这种情况非常敏感，树会扩展，并通过突出显示结果来显示匹配。

我有一个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>

JS功能

$("#search_tree").click(function () {

    $("#errorCodes li").removeclass("collapsible").find("input").removeClass("highlighted");
    //Search again
    $("#errorCodes li input:Contains(" + $('#plugins4_q').val() + ")")
  .addClass("highlighted").parents("li").addClass("collapsible");

});

Answer 1

假设您要搜索与输入相邻的文本（而不是input值），我将每个input包装在label中并让脚本搜索该内容。这个解决方案有很多猜测，但以下内容可能会有用：

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

http://jsfiddle.net/s4Qkz/

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

1 个答案: