如何快速构建优异的 React 搜索体验

如何快速构建优异的 React 搜索体验
做者Jason Stoltzfus

构建搜索体验是一项艰巨的任务。它初看起来很简单：构建搜索栏，将数据放入数据库，而后让用户输入内容对数据库进行查询。可是，在数据建模、基础逻辑，固然还有整体设计和用户体验方面，还有许多事情须要考虑。

咱们接下来介绍如何使用 Elastic 的开源 Search UI库构建出色的基于 React 的搜索体验。整个过程大约须要 30 分钟，完成后，您便可将搜索体验引入任何须要它的应用程序当中。

可是首先要考虑一下，是什么让构建搜索变得如此具备挑战性的？

搜索是艰巨的

几周前，曾热传过一篇很棒的名为 Falsehoods Programmers Believe About Search（关于搜索编程人员相信的谎话）的文章。文章中列出了开发人员在开发搜索时所考虑的一系列错误假设。

下列是几种不少人相信的谎话：

• “知道搜索内容的客户会按照您指望的方式去搜索。”
• “您能够编写一个始终可以成功解析查询的查询解析器。”
• “设置好以后，搜索即可以在下周按照相同的方式去搜索。”
• “同义词简单易用。”
• ……还有许多其余值得了解的亮点，您应当找来一读！

须要注意的是，搜索有许多的挑战，并且这些挑战不只仅在幕后。您须要思考如何管理状态，构建用于筛选、分面、排序、分页、同义词、语言处理的组件，以及更多其余方面的事情。可是，总而言之：

构建优异的搜索须要通过两个复杂的部分：(1) 搜索引擎，它提供支持搜索的 API；(2) 搜索库，它丰富搜索体验。

关于搜索引擎，咱们将基于 Elastic 应用搜索进行介绍。

关于搜索体验，咱们将介绍 OS 搜索库：Search UI。

当咱们完成时，将生成相似如下所示的页面

搜索引擎：Elastic 应用搜索

Elastic 应用搜索可做为一项付费的托管服务或免费的自管型分发提供。在本教程中，咱们将使用托管服务，但请记住，若是您本身托管的话，您的团队能够经过基本许可_免费_使用 Search UI 和应用搜索。

计划：将表明有史以来最好的电子游戏的文档索引到搜索引擎中，而后设计并优化搜索体验，以搜索它们。

首先，注册以得到 14 天的试用期 — 不须要信用卡。

建立一个引擎。有 13 种不一样的语言可供选择。

咱们将它命名为 video-games，并将语言设为 English（英语）。

下载 best video games data set（最佳电子游戏数据集），而后使用导入程序将其上传到应用搜索。

接下来，单击“Engine”（引擎），而后选择 Credentials（凭据）选项卡。

建立一个新的具备有限引擎访问权限的公共搜索密钥，以只能访问 video-games 引擎。

检索这个新的公共搜索密钥和您的主机标识符。

虽然看起来不怎么样，但咱们如今有了一个功能齐全的搜索引擎，可使用优化的搜索 API 来搜索咱们的电子游戏数据了。

下列是截止如今咱们已完成的操做：

• 建立了搜索引擎
• 采集了文档
• 建立了默认架构
• 检索了可公开给浏览器的、限定范围的一次性凭据

这些是截至如今针对应用搜索所作的操做。

下面咱们使用 Search UI 开始构建搜索体验。

搜索库：Search UI

咱们将使用 create-react-app 支架实用工具来建立 React 应用：

在此基础上，咱们将安装 Search UI 和应用搜索链接器：

在开发模式下启动应用：

使用您喜好的文本编辑器打开 src/App.js。

咱们将从一些样本代码开始入手，将其解包。

注意备注！

第 1 步：导入语句

咱们须要导入 Search UI 依赖项和 React。

核心组件、链接器和视图组件包含在三个不一样的包中：

• @elastic/search-ui-app-search-connector
• @elastic/react-search-ui
• @elastic/react-search-ui-views

随着课程的进行，咱们将了解每一个包的更多信息。

此外，咱们还将为这个项目导入默认样式表，这样咱们无需编写本身的 CSS 行即可得到良好的外观和感受：

第 2 步：链接器

咱们从应用搜索获取了公共搜索密钥和主机标识符。

如今是使用它们的时候了！

Search UI 中的链接器对象使用凭据与应用搜索挂钩并支持搜索：

Search UI 可与任何搜索 API 协同工做。可是有了链接器，搜索 API 不须要任何更深层配置，即可以正常工做。

第 3 步：configurationOptions

在深刻探讨 configurationOptions 以前，咱们花点时间认真思考一下。

咱们将一组数据导入了搜索引擎。可是，这是什么样的数据呢？

咱们对数据了解越多，就越能知道如何将数据提供给搜索人员，并能知晓如何配置搜索体验。

让咱们看一个对象，它是这个数据集中最好的对象：

We see that it has several text fields like name, year, platform, and so on and some number fields like critic_score, global_sales, and user_score.

If we ask three key questions, we’ll know enough to build a solid search experience:

• How will most people search?By the name of the video game.
• What will most people want to see in a result?The name of the video game, its genre, publisher, scores, and its platform.
• How will most people filter, sort, and facet?By score, genre, publisher, and platform.

We then can translate those answers into our configurationOptions:

咱们已将 Search UI 链接到搜索引擎，接下来选择管理搜索数据、显示结果和浏览结果的方式。可是，咱们须要一些东西将全部内容与 Search UI 的动态前端组件联系起来。

第 4 步：SearchProvider

这是控制全部内容的对象。SearchProvider 是嵌套全部其余组件的位置。

Search UI 提供了 Layout 组件，用于绘制典型的搜索布局。另有一些深刻定制选项，但咱们在此教程中不作深刻介绍。

咱们将作两件事情：

1. 将 configurationOptions 传入 SearchProvider。
2. 将一些结构构建块放入 Layout，并添加两个基本组件：SearchBox 和 Results。

目前，咱们已在前端完成基本设置工做。后端还有一些额外细节须要处理，而后咱们才能运行。咱们还应该研究相关度模型，以便根据这个项目的独特需求对搜索进行微调。

退出到应用搜索……

回到实验室

应用搜索具备强大而优化的搜索引擎功能，可以使一度复杂的调整变得更加有趣。经过几回单击，即可以执行精细的相关度调整和无缝架构更改。 

咱们将首先调整架构来查看它的实际状况。

登陆应用搜索引擎，而后单击 Manage（管理）部分下的 Schema（架构）。

此时将显示架构。11 个字段中的每一个字段都默认为 text（文本）。

在 configurationOptions 对象中，咱们定义了两个范围分面来帮助按数字搜索：user_score 和 critic_score。为了使范围分面按预期工做，字段类型须要设为数字。

单击每一个字段旁的下拉菜单，将其改成 number（数字），而后单击 Update Types（更新类型）：

引擎即刻从新索引。稍后，当咱们将分面组件添加到布局中时，范围筛选器将按咱们预期的方式工做。如今，看看真正实用的功能。

本部分很是重要

有三个关键的相关度功能：同义词、管理和相关度调整。

选择侧栏中 Search Settings（搜索设置）部分下的每项功能：

同义词

有些人开轿车，有些人开汽车，有些人可能开老爷车。互联网是全球性的，世界各地的人们用不一样的词语来描述事物。同义词可帮助您建立一组被认为是相同的术语。

在电子游戏搜索引擎案例中，咱们知道人们想要查找 Final Fantasy。但他们可能只键入 FF。

单击 Synonyms（同义词），选择 Create a Synonym Set（建立同义词集），而后输入这些术语：

单击 Save（保存）。您能够根据须要添加任意数量的同义词集。

如今，搜索 FF 将与搜索 Final Fantasy 具备相同的权重。

管理

管理是最受欢迎的功能。若是某人搜索 Final Fantasy 或 FF，结果会怎样呢？这个系列中有不少游戏，他们会得到哪一个结果呢？

默认状况下，排列前五的结果将以下显示：

1.Final Fantasy VIII

2.Final Fantasy X

3.Final Fantasy Tactics

4.Final Fantasy IX

5.Final Fantasy XIII

这好像不对，Final Fantasy VII 才是 Final Fantasy 中最佳的一款游戏，并且 Final Fantasy XIII 不是很好的游戏！ 😜

咱们是否可让搜索 Final Fantasy 的人们看到 Final Fantasy VII 列在第一位？是否能够从结果中删除 Final Fantasy XIII？

咱们能作到！

单击 Curations（管理），输入查询：Final Fantasy。

接下来，经过按住表最左侧的把手，将 Final Fantasy VII 文档向上拖动到 Promoted Documents（提高的文档）部分。而后，单击 Final Fantasy XIII 文档上的 Hide Result（隐藏结果）按钮 — 带贯穿线的眼睛图标：

如今，搜索 Final Fantasy 或 FF 将会看到 Final Fantasy VII 排在首位，

而且根本看不到 Final Fantasy XIII 了。哈哈！

咱们能够提高和隐藏多个文档。咱们甚至能够对提高的文档进行排序，以便彻底控制每一个查询顶部显示的内容。

相关度调整

单击侧栏中的 Relevance Tuning（相关度调整）。

咱们搜索一个文本字段：name 字段。可是，若是咱们拥有多个要搜索的文本字段（例如 name 字段和 description 字段），该怎么办？咱们使用的电子游戏数据集不包含 description 字段，所以，咱们将伪造一些文档来仔细考虑这个字段。

假设文档相似以下：

若是某人想要查找游戏 Magical Quest，则会输入它做为查询。可是，第一个结果将是 Dangerous Quest：

为何会这样？这是由于“magical”一词在 Dangerous Quest 的描述中出现了三次，搜索引擎不知道这个字段比另外一个字段更重要。因而，它将 Dangerous Quest 排得更靠前。这就是要进行相关度调整的缘由。

咱们能够在其余内容中选择一个字段，而后提升其相关度权重：

咱们能够看到，在提升权重后，正确的项 Magical Quest 上升到顶部，由于 name 字段变得更重要。咱们要作的就是将滑块拖动到更高值，而后单击 Save（保存）。

如今，咱们使用应用搜索执行下列操做：

• 调整架构，将 user_score 和 critic_score 更改成 number 字段。
• 精细调整相关度模型。

至此，咱们就介绍完了这些巧妙而先进的“仪表板”功能 — 每项功能都有匹配的 API 端点，若是您不喜欢 GUI，则可使用 API 端点以编程方式运行各功能。

如今，让咱们完成 Search UI 的介绍。

收尾工做

如今，您的 UI 应该能够正常运行了。尝试进行一些查询，看看结果如何。首先，咱们缺乏一些工具来探索咱们的结果，例如，筛选、分面、排序等等，可是能够搜索了。咱们须要充实 UI。

在初始 src/App.js 文件中，咱们导入了三个基本组件：

根据咱们对配置选项定义的内容，让咱们再添加一些组件。

导入如下组件将会启用 UI 中缺失的功能：

• PagingInfo：在当前页面上显示信息。
• ResultsPerPage：配置在每个页面上显示的结果数。
• Paging：导航不一样的页面。
• Facet：以数据类型特有的方式筛选和浏览数据。
• Sorting：从新排定给定字段的结果。

导入后，组件能够放入到 Layout 中。

Layout 组件将页面分为多个部分，各组件能够经过属性放入这些部分中。

它包含如下部分：

• Header：搜索框/搜索栏
• bodyContent：结果容器
• sideContent：侧栏，其中包含分面和排序选项
• bodyHeader：围绕结果包含了上下文丰富的信息，例如当前页面和每一页面上的结果数量
• bodyFooter：用于在页面之间快速导航的分页选项

组件呈现数据。数据是根据咱们在 configurationOptions 中提供的搜索设置进行获取的。如今，咱们将每一个组件放入相应的 Layout 部分。

例如，咱们在 configurationOptions 中描述了五个分面维度，所以，咱们将建立五个 Facet 组件。每一个 Facet 组件都将使用一个“field”属性做为返回数据的键。

咱们将它们以及 Sorting 组件放入 sideContent 部分中，而后将 Paging、PagingInfo 和 ResultsPerPage 组件放入最适合它们的部分中：

如今，让咱们看一下本地开发环境中的搜索体验。

好多了！咱们有了不少选项来浏览搜索结果。

咱们添加了一些额外功能，例如，多个排序选项，而且经过添加单一标志使得发布者分面可筛选。尝试使用一个空查询进行搜索，从而浏览全部选项。

最后，咱们看一下搜索体验的最后一个功能。它就是受欢迎的

“自动完成”功能。

自动完成

搜索人员喜欢自动完成，由于它能够提供即时反馈。它的建议有两种方式：结果和查询。根据方式的不一样，搜索人员将收到相关结果或生成结果的潜在查询。

咱们将重点介绍自动完成的查询建议形式。

这须要作两项快速更改。

首先，须要将自动完成添加到 configurationOptions 对象：

其次，须要将自动完成做为 SearchBox 的一个函数启用：

好了，就这么简单。

尝试搜索一下。当您键入时，将显示自动完成查询建议。

总结

如今，咱们拥有了外观好看、功能完善的搜索体验，并且还避免了一大堆人们在尝试实施搜索时会掉入的陷阱。30 分钟的讲解还不错，是否是？

Search UI是灵活的现代 React 框架，可用于快速开发搜索体验。Elastic 应用搜索是 Elasticsearch 中内置的强大搜索引擎。这是一项付费的托管服务，或者经过一个足够用的基本许可，您也能够免费运行它。

---

想要更多了解Elastic技术，欢迎关注和报名参加webinar，近期安排以下：

2020年2月19日（星期三）15:00-16:00
使用Elastic Stack构建全方位可观察性实例

2020年2月26日（星期三）15:00-16:00
Kibana Lens 网络研讨会

2020年3月4日（星期三）15:00-16:00
Elastic Endpoint Security 概述网络

2020年3月11日（星期三）15:00-16:00
使用Elastic Stack监控网站资源