如何快速构建优异的React搜索体验
构建搜索体验是一项艰巨的任务。它初看起来很简单：构建搜索栏，将数据放入数据库，然后让用户输入内容对数据库进行查询。但是，在数据建模、基础逻辑，当然还有总体设计和用户体验方面，还有许多事情需要考虑。
我们接下来介绍如何使用 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 组件，用于绘制典型的搜索布局。另有一些深入定制选项，但我们在此教程中不做深入介绍。
我们将做两件事情：
- 将 configurationOptions 传入 SearchProvider。
- 将一些结构构建块放入 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 不是很好的游戏!