js树形结构递归搜索

树形数据结构

[
    {
        "level": 1,
        "name": "Jack",
        "children": [
            {
                "level": 2,
                "children": [
                    {
                        "level": 3,
                        "children": null,
                        "name": "test", 
                    },
                    {
                        "level": 3,
                        "children": null,
                        "name": "admin", 
                    },
                    {
                        "level": 3,
                        "children": null,
                        "name": "Bob",
                    }
                ]
             }
        ]
    },
    {
        "level": 1,
        "name": "Rose",
        "children": [
            {
                 "level": 2,
                 "children": null,
                 "name": "momo", 
            },
        ]
    }
]
          

大致思路：根据name关键字搜索，如果节点的name能匹配上或者该节点的子节点的name能匹配上，就保留该节点以及该节点的父级节点，其他没有匹配上的过滤处理掉！

 const filterTree=(data, keyword)=> {
  const filterNode = (node) => {
    // 处理子节点
    let filteredChildren = [];
    if (node.children) {
      filteredChildren = node.children
        .map(child => filterNode(child))
        .filter(child => child !== null);
    }
    
    // 检查名称是否匹配或子节点存在
    const isMatched = node.name.toLowerCase().includes(keyword.toLowerCase().trim());
    const hasChildren = filteredChildren.length > 0;
    
    if (isMatched || hasChildren) {
      // 返回新节点，保留过滤后的子节点
      return {
        ...node,
        children: hasChildren ? filteredChildren : null
      };
    }
    return null;
  };
  
  return data
    .map(node => filterNode(node))
    .filter(node => node !== null);
}

// 使用
const filteredData = filterTree(originalData, searchKeyword);

扩展

如果需要搜索结果展开，可以添加open属性

 /**搜索递归结果展开 */
 const transformNodeOpen = data => {
    return data.map(item => ({
      ...item,
      isOpen: true,
      children: item.children
        ? transformNodeOpen(item.children)
         : undefined,
    }));
  };
   

实现效果