需求背景:
前端业务往往有列表机构树的需求,其中有一个业务需求就是模糊搜索功能,通常情况下前端拿到接口数据后会缓存本地,无需与后端网络交互就可以实现本地模糊搜索;
实现步骤:
JS 实现树形结构数据的模糊搜索查询,
即使父节点没有,但子节点含有,父节点仍要返回。
// tree数据结构
export default [
{
code: "01",
desc: "农、林",
isOpen: false,
hasParent: "N",
children: [
{
code: "0101",
desc: "农业",
isOpen: false,
children: [
{
code: "0101001",
level: "1",
desc: "农场xxxxxx"
},
{
code: "0101002",
level: "2",
desc: "农场xxxxxx"
},
{
code: "0101003",
level: "2",
desc: "农场xxxxxx"
},
{
code: "0101004",
level: "3",
desc: "农场xxxxxx"
},
{
code: "0101005",
level: "3",
desc: "农场xxxxxx"
},
{
code: "0101006",
level: "5",
desc: "农场xxxxxx"
}
]
},
{
code: "0102",
desc: "林业",
isOpen: false,
children: [
{
code: "0102001",
level: "2",
desc: "林业xxxxxx"
},
{
code: "0102002",
level: "4",
desc: "林业xxxxxx"
},
{
code: "0102003",
level: "4",
desc: "林业xxxxxx"
},
{
code: "0102004",
level: "5",
desc: "林业xxxxxx"
},
{
code: "0102005",
level: "5",
desc: "林业xxxxxx"
},
{
code: "0102006",
level: "4",
desc: "林业xxxxxx"
},
{
code: "0102007",
level: "7",
desc: "林业xxxxxx"
}
]
}
]
}
];
/**
* 递归tree关键词搜索
*
* @param {key} 需要递归的key名
* @param {value} 需要搜索查询的关键字
* @param {treeList} 遍历tree列表
* @return {saveList} 返回查询数组列表
*/
function onFuzzyTreeList (key, value, treeList, saveList = []) {
return new Promise((resolve, reject) => {
treeList.forEach(item => {
if (item[key].indexOf(value) > -1) {
saveList.push(item);
} else {
if (item.children && item.children.length > 0) {
const _reData = onFuzzyTreeList(key, value, item.children, saveList);
if (_reData && _reData.length > 0) {
saveList.push({
...item,
children: _reData
})
}
}
}
})
resolve(saveList)
})
}
// 调用
onFuzzyTreeList('desc', '农业', treeList, [])