树形数据模糊搜索

  • 根据关键字搜索树🌲型结构
  • 如果父级不含有关键字而子集含有,则父级也要展示
  • 如果父级不含有关键字且子集也不含有,则父级子集都不展示

💩比如给你下面这些数据,展示关键字搜索name的结果,你会怎么做🤔:

json 复制代码
 "data": [
        {
            "id": 23,
            "parentId": 0,
            "name": "主题b",
            "level": 1,
            "children": [
                {
                    "id": 24,
                    "parentId": 23,
                    "name": "主题",
                    "level": 2,
                    "children": [
                        {
                            "id": 25,
                            "parentId": 24,
                            "name": "主题",
                            "level": 3,
                        }
                    ]
                }
            ]
        },
        {
            "id": 27,
            "parentId": 0,
            "name": "主题d",
            "level": 1,
            "children": [
                {
                    "id": 28,
                    "parentId": 27,
                    "name": "主题d1",
                    "level": 2,
                }
            ]
        },
        {
            "id": 1,
            "parentId": 0,
            "name": "提款相关",
            "level": 1,
            "children": [
                {
                    "id": 2,
                    "parentId": 1,
                    "name": "提款问题-会员",
                    "level": 2,
                    "children": [
                        {
                            "id": 3,
                            "parentId": 2,
                            "name": "提款失败",
                            "level": 3,
                            "children": [
                                {
                                    "id": 4,
                                    "parentId": 3,
                                    "name": "提款失败-财务环节",
                                    "level": 4,
                                },
                                {
                                    "id": 5,
                                    "parentId": 3,
                                    "name": "提款失败-三方环节",
                                    "level": 4,
                                },
                                {
                                    "id": 6,
                                    "parentId": 3,
                                    "name": "提款失败-人工环节",
                                    "level": 4,
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "id": 17,
            "parentId": 0,
            "name": "存款问题",
            "level": 1,
            "children": [
                {
                    "id": 18,
                    "parentId": 17,
                    "name": "存款-会员",
                    "level": 2,
                    "children": [
                        {
                            "id": 19,
                            "parentId": 18,
                            "name": "存款消息",
                            "level": 3,
                        }
                    ]
                }
            ]
        },
        {
            "id": 7,
            "parentId": 0,
            "name": "充值问题",
            "level": 1,
            "children": [
                {
                    "id": 8,
                    "parentId": 7,
                    "name": "充值问题-商户",
                    "level": 2,
                }
            ]
        },
        {
            "id": 20,
            "parentId": 0,
            "name": "主题a",
            "level": 1,
            "children": [
                {
                    "id": 21,
                    "parentId": 20,
                    "name": "主题a1",
                    "level": 2,
                    "children": [
                        {
                            "id": 22,
                            "parentId": 21,
                            "name": "主题a2",
                            "level": 3,
                        }
                    ]
                }
            ]
        },
        {
            "id": 26,
            "parentId": 0,
            "name": "主题",
            "level": 1,
        },
        {
            "id": 12,
            "parentId": 0,
            "name": "账号相关",
            "level": 1,
            "children": [
                {
                    "id": 13,
                    "parentId": 12,
                    "name": "信息安全",
                    "level": 2,
                    "children": [
                        {
                            "id": 14,
                            "parentId": 13,
                            "name": "修改信息问题",
                            "level": 3,
                            "children": [
                                {
                                    "id": 15,
                                    "parentId": 14,
                                    "name": "问题描述1",
                                    "level": 4,
                                }
                            ]
                        }
                    ]
                },
                {
                    "id": 16,
                    "parentId": 12,
                    "name": "账号冻结",
                    "level": 2,
                }
            ]
        }
    ],

🚀2、接下来我们直接上干货(这里面要思考一下下的🤔)

ini 复制代码
const filterDataByName = (name) => {
   if (name) {
      const filterData = [];
      const dripChildren = (arr, copyArr) => {
        const pick = new Set();
        for (let i = 0, len = arr.length; i < len; i++) {
          const { children, ...rest } = arr[i];
          if (arr[i].name.indexOf(name) > -1) {
            copyArr.push(rest);
          }
          
          if (children?.length) {
            rest.children = [];
            const finalChildren = dripChildren(children, rest.children);
            if (arr[i].name.indexOf(name) < 0) {
              if (!finalChildren && !rest.children.length) {
                rest.children = undefined;
              } else {
                copyArr.push(rest);
              }
            }
          } else {
            if (arr[i].name.indexOf(name) > -1) {
              pick.add(arr[i].id);
            }
          }
        }
        
        if (pick.size > 0) {
          return arr.filter((item) => pick.has(item.id));
        }
      }
      
      // data为原始数据
      // 当搜索关键词为空时,我们直接用原始数据data
      // 当搜索关键词不为空,我们用最终过滤的filterData
      
      dripChildren(data, filterData);
      
      console.log(filterData, '这就是最终过滤出来的数据')
   }
}
相关推荐
朝朝又沐沐1 小时前
算法竞赛阶段二-数据结构(36)数据结构双向链表模拟实现
开发语言·数据结构·c++·算法·链表
YGY Webgis糕手之路1 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔2 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang2 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔2 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
薰衣草23332 小时前
一天两道力扣(6)
算法·leetcode
德育处主任2 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
剪一朵云爱着2 小时前
力扣946. 验证栈序列
算法·
烛阴2 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔2 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js