前端 tree 树实现本地模糊搜索

需求背景：

前端业务往往有列表机构树的需求，其中有一个业务需求就是模糊搜索功能，通常情况下前端拿到接口数据后会缓存本地，无需与后端网络交互就可以实现本地模糊搜索；

实现步骤：

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, [])