项目前端使用layui来渲染页面，其中树形数据展示用layui.tree.render()实现，生成类似以下图：

image.png

其中搜索框的实现需求：
1、搜索关键字为模糊搜索
2、展示关键字命中的目标节点及所有子节点和所有父节点

layui.tree数据类似如下：

var data = [
    {
        "title":"客户标签",
        "id":"1",
        "spread":true,
        "children":[
            {
                "title":"基础信息",
                "id":"3",
                "spread":false,
                "children":[
                    {
                        "title":"人口属性",
                        "id":"10",
                        "spread":false,
                        "children":[
                         // 省略剩余子节点
                        ]
                    }
                ]
            }
        ]
    }
]

实现思路：还是通过递归遍历所有子节点来判断是否包含字符串，末节点若不包含则删除自身，这样上一级父节点就变成了末节点，再进行一样的判断即可，主要工作量在于对js数组和对象的删除需要有一定的理解，实现代码如下：

var labCondition = '搜索关键字';

//过滤搜索条件
function reFilter(array) {
    for (var i=0; i<array.length; i++) {
        var data = array[i];
        if (data.title.indexOf(labCondition) > -1) {
            continue;
        }
        if (data.children && data.children.length > 0) {
            reFilter(data.children);
        }
        if (!((data.children && data.children.length > 0)) && data.title.indexOf(labCondition)==-1) {
            array.splice(i, 1);
            i--;
        }
    }
}

//将源树形数据data放进去执行后就可以直接使用layui.tree渲染了
reFilter(data);
tree.render({
    elem: '#xxx',
    data: data,
    id: 'xxx',
    showLine: false,      //是否开启连线
    accordion: true,      //是否开启手风琴模式
    showCheckbox: false,  //是否显示复选框
    click:function(item){}
});

写完搜了下layui，发现今天正好是layui官网下架的日子，
—— "9月26日消息，前端UI框架Layui在其官网发布公告称，layui官网将于2021年10月13日进行下线。届时，包括新版下载、文档和示例在内的所有框架日常维护工作，将全部迁移到Github和Gitee。layui作者贤心向开发者致歉，并称这是一个无力、无奈，甚至无助的决定，“这不是终结，只是重归到开源的纯粹中来”。"

前端框架用过不少，layui似乎一直是佼佼者，看了下百度搜索热度基本跟 bootstrap 持平，国内开源不好做，可惜。。

2021-10-19更新：layui原官网已无法访问，可以访问镜像地址：www.laizhefa.com