前端、js实现树形结构数据的模糊搜索查询、模糊过滤

示例：

需求：输入 “景区” 字，希望树形结构中带有 “景区” 字的项显示，即使父节点没有，但子节点含有，父节点仍要返回。

let _expandKeys_  = []

const filterTree = (val, tree, newArr = []) => {

    if (!(tree.length && val)) {  // 如果搜索关键字为空直接返回源数据

      _expandKeys_ = defaultOpenKeyArr  //这块是为了记录tree的展开key可以忽略

      return tree

    }

    for (let item of tree) {

      if (item.title.indexOf(val) > -1) { // 匹配到关键字的逻辑

        newArr.push(item)  // 如果匹配到就在数值中添加记录

        if (item.children) _expandKeys_.push(item.key)  //这块是为了记录tree的展开key可以忽略

        continue  // 匹配到了就退出循环了此时如果有子集也会一并带着
        
      }

      if (item.children && item.children.length) { // 如果父级节点没有匹配到就看看是否有子集，然后做递归

          _expandKeys_.push(item.key)  //这块是为了记录tree的展开key可以忽略
          
          let subArr = filterTree(val, item.children) // 缓存递归后的子集数组

        if (subArr && subArr.length) {  // 如果子集数据有匹配到的节点

          let node = { ...item, children: subArr }  // 关键逻辑，缓存父节点同时将递归后的子节点作为新值

          newArr.push(node)  // 添加进数组

        }        

      }

    }

    return newArr
  }

const onSearch = (value) => {

    _expandKeys_ = []

    let _res_ = filterTree(value, data)

    console.log('结果:', _res_)
  }

<Search className="smart__treesearch__wrap" placeholder="快速定位" onSearch={ onSearch } />