如何使用Elasticsearch并对接React搜索组件实现检索与联想功能

1. 基础环境准备 #

• 首先完成Elasticsearch（以下简称ES）服务部署：本地开发直接下载对应系统的ES安装包，解压后执行bin/elasticsearch命令启动服务，默认运行在9200端口。
• 修改ES配置文件config/elasticsearch.yml开启跨域，本地测试可以先配置为：

http.cors.enabled: true
http.cors.allow-origin: "*"

生产环境必须把*替换为你的站点实际域名，避免安全漏洞

• 给ES安装IK中文分词器（如果你的知识库是中文内容），否则默认分词器会把中文拆分为单个汉字，搜索结果匹配度极低。
• 创建知识库索引，需要做自动补全的字段设置为completion类型，需要全文检索的字段绑定IK分词器，之后将你的知识库全量数据导入ES索引中。

2. 后端接口封装 #

不要直接在前端调用ES原生接口，ES默认无身份校验，直接暴露到前端会有数据泄露、被恶意操作的风险，用你熟悉的后端语言封装两个接口即可，这里以Node.js为例：

• 联想词查询接口：接收前端传入的用户输入关键词，调用ES的suggest查询返回匹配的联想词，示例查询逻辑：

const esRes = await esClient.search({
  index: "你的知识库索引名",
  suggest: {
    "keyword-suggest": {
      prefix: 用户输入的关键词,
      completion: {
        field: "你设置为completion类型的字段名",
        skip_duplicates: true,
        size: 8 // 单次最多返回8条联想结果
      }
    }
  }
})

处理ES返回结果，提取联想词列表返回给前端即可。

• 全文检索接口：接收前端传入的搜索关键词、筛选条件参数，拼接ES的bool查询语句，同时匹配搜索词和筛选条件，返回符合要求的知识库卡片全量数据。

3. React端功能对接 #

3.1 搜索组件与自动补全实现 #

你可以直接用UI组件库的自动完成组件（比如Ant Design的AutoComplete、MUI的Autocomplete），也可以自己实现基础逻辑：

• 给搜索输入框绑定onChange事件，加300ms的防抖处理，避免用户每输入一个字符就发起请求，输入内容变化时调用后端的联想词接口，将返回的联想词填充到下拉选择列表中。
• 用户选中联想词、或者按下回车确认搜索时，调用后端的全文检索接口，拿到匹配的卡片数据。

3.2 卡片渲染与筛选功能联动 #

• 拿到检索接口返回的卡片数据数组后，直接传给你的卡片展示模块渲染即可，不需要前端做二次过滤。
• 筛选功能的参数直接和搜索参数一起传给后端检索接口，后端将筛选条件拼入ES查询的filter节点中，返回的结果天然符合筛选要求，性能远高于前端二次过滤。

4. 常见问题处理 #

• 如果联想结果匹配度不高，可以调整completion字段的权重配置，优先返回高频搜索的关键词。
• 搜索结果排序可以在ES查询中加入权重配置，比如标题匹配的结果权重高于内容匹配的结果，优先展示更相关的内容。

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