构建搜索体验是一项艰巨的任务。乍一看很简单：建立一个搜索栏，将数据放入数据库，让用户输入一些东西来查询数据库。然而，在数据建模、底层逻辑，当然还有整体设计和用户体验方面，还有更多的事情需要考虑。接下来，我们将介绍如何使用Elastic的开源搜索UI库构建出色的基于React的搜索体验。整个过程大约需要30分钟，一旦完成，您就可以将搜索体验带入任何需要它的应用程序中。但首先想一想，是什么让构建搜索如此具有挑战性？搜索是硬谎言）文章。这篇文章列出了开发人员在开发搜索时所做的一系列错误假设。以下是许多人相信的一些谎言：“知道要搜索什么的客户会按照您期望的方式进行搜索。”“您可以编写一个始终成功解析查询的查询解析器。”“一旦你设置好，搜索就可以了。下周以同样的方式搜索。”“同义词简单易用。”...还有许多其他亮点值得您阅读！需要注意的是，搜索有很多挑战，而这些挑战不仅仅是在幕后。您需要考虑如何管理状态，构建用于过滤、分面、排序、分页、同义词、语言处理等的组件。但是，总而言之：构建出色的搜索需要两个复杂的部分：(1)搜索引擎，它提供支持搜索的API，以及(2)搜索库，它丰富了搜索体验。关于搜索引擎，我们将基于Elastic应用搜索来介绍。对于搜索体验，我们将介绍操作系统搜索库：SearchUI。完成后，生成的页面搜索引擎如下所示：ElasticAppSearchElasticAppSearch可作为付费托管服务或作为免费的自我管理分发提供。在本教程中，我们将使用托管服务，但请记住，如果您自己托管，您的团队可以_免费_使用基本许可的搜索UI和AppSearch。计划：将代表有史以来最好的视频游戏的文档索引到搜索引擎中，然后设计和优化搜索体验以搜索它们。首先，注册一个14天的试用期——不需要信用卡。创建引擎。有13种不同的语言可供选择。让我们将其命名为视频游戏并将语言设置为英语。下载最好的视频游戏数据集并使用导入器将其上传到AppSearch。接下来，单击引擎并选择凭据选项卡。创建一个具有有限引擎访问权限的新公共搜索密钥，以仅访问视频游戏引擎。检索这个新的公共搜索密钥和您的主机标识符。它看起来并不多，但我们现在拥有一个功能齐全的搜索引擎，可以使用优化的搜索API搜索我们的视频游戏数据。以下是我们目前所做的工作：创建搜索引擎捕获文档创建默认架构检索可向浏览器公开的范围内的一次性凭证这些是我们迄今为止为应用搜索所做的工作。让我们开始使用搜索UI构建搜索体验。搜索库：搜索UI我们将使用create-react-app脚手架实用程序来创建React应用程序：基于此，我们将安装搜索UI和应用程序搜索连接器：在开发模式下启动应用程序：使用您喜欢的文本编辑器在浏览器中打开src/App.js。我们将从一些示例代码开始并将其解压缩。笔记！第1步：导入语句我们需要导入SearchUI依赖项和React。核心组件、连接器和视图组件包含在三个不同的包中：@elastic/search-ui-app-search-connector@elastic/react-search-ui@elastic/react-search-ui-viewswithclasses，我们将详细了解每个包。此外，我们将为这个项目导入默认样式表，这样我们就可以在不编写自己的CSS行的情况下获得良好的外观和感觉：第2步：连接器我们从AppSearch获取公共搜索密钥和主机标识符。现在是使用它们的时候了！搜索UI中的连接器对象使用凭据挂钩并在您的应用程序中启用搜索：搜索UI可与任何搜索API配合使用。但是有了连接器，搜索API不需要任何进一步的配置就可以工作。第3步：configurationOptions在深入了解configurationOptions之前，让我们花点时间考虑一下。我们将一组数据导入搜索引擎。但这是什么样的数据？我们对数据了解得越多，就越能理解如何将数据提供给搜索者以及如何配置搜索体验。让我们看一下这个数据集中最好的对象：我们看到它有几个文本字段，如名称、年份、平台等，以及一些数字字段，如critic_score、global_sales和user_score。如果我们提出三个关键问题，我们就会知道足够多的信息来构建可靠的搜索体验：大多数人将如何搜索？以视频游戏的名称。大多数人希望在结果中看到什么？视频游戏的名称、类型、发行商、分数和平台。大多数人将如何过滤、排序和分面？按乐谱、流派、出版商和平台。然后我们可以将这些答案转化为我们的配置选项：我们已将搜索UI连接到搜索引擎，然后向下滚动以选择您希望如何管理搜索数据、显示结果和浏览结果。但是，我们需要一些东西来将所有内容与搜索UI的动态前端组件联系起来。第4步：SearchProvider这是控制一切的对象。SearchProvider是嵌套所有其他组件的地方。SearchUI提供了一个Layout组件，用于绘制典型的搜索布局。还有一些深入的自定义选项，但我们不会在本教程中深入介绍它们。我们将做两件事：将configurationOptions传递给SearchProvider。在Layout中放入一些结构构建块，并添加两个基本组件：SearchBox和Results。至此，我们已经完成了前端的基本设置工作。在我们运行之前，后端需要处理一些额外的细节。我们还应该研究相关性模型，以根据该项目的独特需求微调搜索。退出AppSearch...返回实验室AppSearch具有功能强大且经过优化的搜索引擎，能够使曾经复杂的调整变得更加有趣。只需单击几下即可执行细粒度的相关性调整和无缝架构更改。我们将首先调整模式以查看它的实际效果。登录AppSearchEngine并单击“管理”部分下的架构。显示架构。11个字段中的每一个都默认为文本。在configurationOptions对象中，我们定义了两个范围方面来促进数字搜索：user_score和critic_score。为了使范围分面按预期工作，需要将字段类型设置为数字。单击每个字段旁边的下拉菜单，将其更改为数字，然后单击更新类型：引擎会立即重新编制索引。稍后，当我们将分面组件添加到布局中时，范围过滤器将按我们预期的那样工作。现在，介绍真正有用的功能。本节包含三个关键的相关性特征：同义词、管理和相关性调整。在边栏的“搜索设置”部分下选择每个功能：同义词有些人开轿车，有些人开汽车，有些人可能开老爷车。互联网是全球性的，世界各地的人们用不同的词来描述事物。同义词可帮助您创建一组被认为相同的术语。在视频游戏搜索引擎案例中，我们知道人们想要查找最终幻想。但他们可能只是输入FF。单击同义词，选择创建同义词集，然后输入术语：单击保存。您可以根据需要添加任意数量的同义词集。搜索FF现在与搜索FinalFantasy具有相同的权重。管理管理是最受欢迎的功能。如果有人搜索最终幻想或FF，结果会是什么？这个系列有很多场比赛，他们会得到什么结果呢？默认情况下，前五名的结果会显示如下：1.FinalFantasyVIII2.FinalFantasyX3.FinalFantasyTactics4.FinalFantasyIX5.FinalFantasyXIII这似乎不对，FinalFantasyVII是FinalFantasy中最好的游戏，最终幻想XIII不是一款好游戏！😜我们可以让搜索《最终幻想》的人首先看到《最终幻想VII》吗？是否可以从结果中删除FinalFantasyXIII？我们可以！单击Curations（管理）并输入查询：FinalFantasy。接下来，按住表格最左侧的手柄，将最终幻想VII文档向上拖动到“推广文档”部分。然后，单击FinalFantasyXIII文档上的隐藏结果按钮——带有一条线的眼睛图标：现在，搜索FinalFantasy或FF将在顶部看到FinalFantasyVII，而你根本看不到FinalFantasy十三来了。哈哈！我们可以提升和隐藏多个文档。我们甚至可以对提升的文档进行排序，以完全控制每个查询顶部显示的内容。RelevanceTuning单击边栏中的RelevanceTuning。我们搜索一个文本字段：名称字段。但是，如果我们有多个文本字段要搜索（例如名称字段和描述字段）怎么办？我们使用的视频游戏数据集不包含描述字段，因此我们将伪造一些文档以仔细考虑该字段。假设文档如下所示：如果有人想查找游戏MagicalQuest，他们会将其作为查询输入。然而，第一个结果将是危险任务：这是为什么？这是因为“魔法”一词在危险任务的描述中出现了三次，而搜索引擎并不知道这个字段比另一个字段更重要。因此，它对DangerousQuest的排名更高。这就是相关性调整的原因。我们可以在其他内容中选择一个字段，增加它的相关性权重：我们可以看到，增加权重后，正确的项目MagicalQuest上升到了最前面，因为name字段变得更重要了。我们所要做的就是将滑块拖动到更高的值，然后单击保存。现在，我们使用应用搜索来执行以下操作：调整架构以将user_score和critic_score更改为数字字段。微调相关性模型。到目前为止，我们已经介绍了这些简洁且高级的“仪表板”功能-每个功能都有一个匹配的API端点，如果您不喜欢GUI，您可以使用API端点以编程方式运行每个功能。现在，让我们完成对搜索UI的介绍。收尾您的用户界面现在应该可以正常使用了。尝试做一些查询，看看结果是什么。首先，我们缺少一些工具来探索我们的结果，例如过滤、分面、排序等，但它是可搜索的。我们需要充实UI。在最初的src/App.js文件中，我们导入了三个基本组件：根据我们用配置选项定义的内容，让我们添加更多组件。导入以下组件将启用UI中缺少的功能：PagingInfo：在当前页面上显示信息。ResultsPerPage：配置每页显示的结果数。分页：浏览不同的页面。构面：以特定于数据类型的方式过滤和浏览数据。排序：对给定字段的结果重新排序。导入后，可以将组件放入Layouts中。Layout组件将页面划分为多个部分，可以通过属性将组件放置在这些部分中。它由以下部分组成：Header：搜索框/栏bodyContent：结果容器sideContent：边栏，其中包含分面和排序选项bodyHeader：用上下文丰富的信息包围结果，例如当前页面和每页上的结果数bodyFooter：用于在页面之间快速导航的分页选项组件呈现数据。数据是根据我们在configurationOptions中提供的搜索设置获取的。现在，我们将每个组件放入相应的布局部分。例如，我们在configurationOptions中描述了五个facet维度，因此，我们将创建五个Facet组件。每个Facet组件将使用一个“字段”属性作为返回数据的键。我们将它们与Sorting组件一起放入sideContent部分，然后将Paging、PagingInfo和ResultsPerPage组件放入最适合它们的部分：现在，让我们看看本地开发环境中的搜索体验。好多了！我们现在有很多浏览搜索结果的选项。我们添加了一些额外的功能，例如多个排序选项，并通过添加单个标志使发布者方面可过滤。尝试使用空查询进行搜索以浏览所有选项。最后，我们来看看搜索体验的最后一个特性。这是流行的“自动完成”功能。自动完成搜索者喜欢自动完成，因为它提供即时反馈。它建议两种方式：结果和查询。根据方法的不同，搜索者将收到相关结果或生成结果的潜在查询。我们将重点关注查询建议的自动完成形式。这需要两个快速更改。首先，需要将自动完成添加到configurationOptions对象；其次，需要启用自动完成功能作为SearchBox的功能：好吧，就这么简单。尝试搜索它。在您键入时，会显示自动完成查询建议。总结我们现在拥有美观、功能齐全的搜索体验，避免了人们在尝试实现搜索时掉入的一大堆陷阱。30分钟的演练还不错，不是吗？SearchUI是一个灵活的现代React框架，用于快速开发搜索体验。ElasticAppSearch是Elasticsearch中内置的一个强大的搜索引擎。这是一项付费托管服务，或者您可以使用足够的基本许可证免费运行它。
