解决antd中搜索过滤问题的方法

在前端开发过程中，我们经常会遇到antd中搜索功能的一些问题。例如，antd中的搜索会将不相关的子节点也一并带出来，这可能不符合我们的预期。我们希望搜索时能够过滤掉不匹配的内容，只留下匹配的内容，或者在搜索时，当子节点不是搜索内容，但是孙节点和祖孙节点中存在要搜索的内容时，要将该子节点保留。本文将介绍如何解决这些问题，并提供具体的实现方法。

以下是搜索前的示例图：



以下是搜索后的示例图，当我们搜索5时，我们希望直接将213过滤掉：

为了解决这个问题，我们可以使用antd-treeselect中的filterTreeNode属性，该属性用于根据输入项进行筛选，默认使用treeNodeFilterProp的值作为要筛选的TreeNode的属性值。具体的方法如下所示：

我们可以使用以下方法来实现搜索功能：

//toLowerCase（）的方法主要是为了使用不区分大小写使用
 const filterTreeNode = (inputValue: string, treeNode: any) => {
    return treeNode.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
  }

接下来，我们将介绍具体的实现方法。首先，我们需要对搜索树时过滤掉搜索出的父节点下与搜索内容无关的其他子节点进行操作。我们可以使用以下方法来实现：

 // 此处操作主要用于前端处理搜索树时过滤掉搜索出的父节点下与搜索内容无关的其他子节点
    // 具体实现方法略

我们还需要实现搜索结果的高亮显示，以及对搜索到的值进行标记。以下是一个用于搜索高亮显示的方法示例：

  const getSearchList = (data: treeDataNode[], searchValue: string) => {
    // 具体实现方法略
  }

此外，我们还需要实现一些辅助方法，如获取父节点的方法getParentKey、递归查找祖先节点的方法traverseParent、扁平化树形数据结构并转换每个节点的格式的方法generateList、重新构建树的方法hasTree以及删除hasSearch为false的节点的方法removeFalseNodes。这些方法的具体实现略。

总之，为了解决antd中搜索过滤的问题，我们使用了一些数组方法和ES6的Map结构。虽然在实现过程中可能显得有些冗余，但最终的效果是令人满意的。如果您有更好的方法，欢迎指教。

最后，我们也提到了，如果这种问题可以放在后端进行搜索请求，可以减少前端遍历和重组的过程，减少渲染次数，这可能会更好。