如何在Swagger UI中添加搜索筛选功能实现端点过滤

内置功能确认 #

3.30.1版本的swagger-ui-react本身已经内置了端点搜索、筛选能力，无需额外开发自定义组件，仅需调整组件配置即可启用该功能。

具体实现步骤 #

1. 修改组件配置 #

找到你项目中引入SwaggerUI组件的代码文件，在组件属性中新增filter配置项：

import SwaggerUI from 'swagger-ui-react'
import 'swagger-ui-react/swagger-ui.css'

// 你的API文档页组件
function ApiDocument() {
  return (
    <SwaggerUI
      // 原有接口文档地址配置保持不变
      url="/api-docs"
      // 新增该行配置开启搜索栏
      filter={true}
      // 其他原有配置（如docExpansion、persistAuthorization等）保留即可
    />
  )
}

2. 进阶配置（可选） #

你可以根据使用习惯调整配套配置，优化筛选体验：

• 若需要默认带初始搜索关键词，可直接给filter传字符串，比如filter="订单"会默认筛选所有和订单相关的端点
• 新增operationsSorter: 'alpha'配置，可让所有端点按接口路径字母顺序排序，搜索结果展示更规整
• 新增deepLinking: true配置，搜索到目标端点后可直接复制当前页面链接，打开后会自动定位到对应端点位置

功能说明 #

配置生效后，SwaggerUI顶部会自动生成搜索输入框，支持的筛选维度包括：

• 接口路径模糊匹配
• 控制器（Tag）名称匹配
• 请求方法（GET/POST/PUT等）精确匹配
• 接口描述内容匹配

常见问题排查 #

如果配置后搜索栏未正常显示，优先检查两点：

1. 项目中是否有自定义CSS隐藏了SwaggerUI的顶部操作栏
2. 确认swagger-ui-react依赖版本确实为3.30.1，未出现版本依赖冲突

内容的提问来源于stack exchange，提问作者blueZ