- 根据关键字搜索树🌲型结构
- 如果父级不含有关键字而子集含有，则父级也要展示
- 如果父级不含有关键字且子集也不含有，则父级子集都不展示
💩比如给你下面这些数据，展示关键字搜索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, '这就是最终过滤出来的数据')
}
}