怎么快速构建优异的React搜索体验

这篇文章主要介绍“怎么快速构建优异的React搜索体验”,在日常操作中,相信很多人在怎么快速构建优异的React搜索体验问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么快速构建优异的React搜索体验”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

郑州网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作,到程序开发,运营维护。创新互联公司于2013年创立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司

搜索引擎:Elastic 应用搜索

Elastic  应用搜索可作为一项付费的托管服务或免费的自管型分发提供。在本教程中,我们将使用托管服务,但请记住,如果您自己托管的话,您的团队可以通过基本许可_免费_使用  Search UI 和应用搜索。

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

首先,注册以获得 14 天的试用期 — 不需要信用卡。

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

我们将它命名为 video-games,并将语言设为 English(英语)。

怎么快速构建优异的React搜索体验

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

接下来,单击“Engine”(引擎),然后选择 Credentials(凭据)选项卡。

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

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

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

下列是截止现在我们已完成的操作:

  • 创建了搜索引擎

  • 采集了文档

  • 创建了默认架构

  • 检索了可公开给浏览器的、限定范围的一次性凭据

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

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

搜索库:Search UI

我们将使用 create-react-app 支架实用工具来创建 React 应用:

怎么快速构建优异的React搜索体验

在此基础上,我们将安装 Search UI 和应用搜索连接器:

怎么快速构建优异的React搜索体验

在开发模式下启动应用:

怎么快速构建优异的React搜索体验

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

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

注意备注!

怎么快速构建优异的React搜索体验

第 1 步:导入语句

我们需要导入 Search UI 依赖项和 React。

核心组件、连接器和视图组件包含在三个不同的包中:

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

  • @elastic/react-search-ui

  • @elastic/react-search-ui-views

随着课程的进行,我们将了解每个包的更多信息。

怎么快速构建优异的React搜索体验

此外,我们还将为这个项目导入默认样式表,这样我们无需编写自己的 CSS 行便可获得良好的外观和感觉:

怎么快速构建优异的React搜索体验

第 2 步:连接器

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

现在是使用它们的时候了!

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

怎么快速构建优异的React搜索体验

Search UI 可与任何搜索 API 协同工作。但是有了连接器,搜索 API 不需要任何更深层配置,便可以正常工作。

第 3 步:configurationOptions

在深入探讨 configurationOptions 之前,我们花点时间认真思考一下。

我们将一组数据导入了搜索引擎。但是,这是什么样的数据呢?

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

让我们看一个对象,它是这个数据集中最好的对象:

怎么快速构建优异的React搜索体验

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:

怎么快速构建优异的React搜索体验

我们已将 Search UI 连接到搜索引擎,接下来选择管理搜索数据、显示结果和浏览结果的方式。但是,我们需要一些东西将所有内容与 Search UI  的动态前端组件联系起来。

第 4 步:SearchProvider

这是控制所有内容的对象。SearchProvider 是嵌套所有其他组件的位置。

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

我们将做两件事情:

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2. 将 configurationOptions 传入 SearchProvider。

  3. 将一些结构构建块放入 Layout,并添加两个基本组件:SearchBox 和 Results。

怎么快速构建优异的React搜索体验

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

退出到应用搜索……

回到实验室

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

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

登录应用搜索引擎,然后单击 Manage(管理)部分下的 Schema(架构)。

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

在 configurationOptions 对象中,我们定义了两个范围分面来帮助按数字搜索:user_score 和  critic_score。为了使范围分面按预期工作,字段类型需要设为数字。

单击每个字段旁的下拉菜单,将其改为 number(数字),然后单击 Update Types(更新类型):

怎么快速构建优异的React搜索体验

引擎即刻重新索引。稍后,当我们将分面组件添加到布局中时,范围筛选器将按我们预期的方式工作。现在,看看真正实用的功能。

本部分非常重要

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

选择侧栏中 Search Settings(搜索设置)部分下的每项功能:

怎么快速构建优异的React搜索体验

同义词

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

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

单击 Synonyms(同义词),选择 Create a Synonym Set(创建同义词集),然后输入这些术语:

怎么快速构建优异的React搜索体验

单击 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(隐藏结果)按钮 — 带贯穿线的眼睛图标:

怎么快速构建优异的React搜索体验

现在,搜索 Final Fantasy 或 FF 将会看到 Final Fantasy VII 排在首位,

并且根本看不到 Final Fantasy XIII 了。哈哈!

我们可以提升和隐藏多个文档。我们甚至可以对提升的文档进行排序,以便完全控制每个查询顶部显示的内容。

相关度调整

单击侧栏中的 Relevance Tuning(相关度调整)。

我们搜索一个文本字段:name 字段。但是,如果我们拥有多个要搜索的文本字段(例如 name 字段和 description  字段),该怎么办?我们使用的电子游戏数据集不包含 description 字段,因此,我们将伪造一些文档来仔细考虑这个字段。

假设文档类似如下:

怎么快速构建优异的React搜索体验

如果某人想要查找游戏 Magical Quest,则会输入它作为查询。但是,第一个结果将是 Dangerous Quest:

怎么快速构建优异的React搜索体验

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

我们可以在其他内容中选择一个字段,然后提高其相关度权重:

怎么快速构建优异的React搜索体验

我们可以看到,在提高权重后,正确的项 Magical Quest 上升到顶部,因为 name 字段变得更重要。我们要做的就是将滑块拖动到更高值,然后单击  Save(保存)。

现在,我们使用应用搜索执行下列操作:

  • 调整架构,将 user_score 和 critic_score 更改为 number 字段。

  • 精细调整相关度模型。

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

现在,让我们完成 Search UI 的介绍。

收尾工作

现在,您的 UI  应该可以正常运行了。尝试进行一些查询,看看结果如何。首先,我们缺少一些工具来探索我们的结果,例如,筛选、分面、排序等等,但是可以搜索了。我们需要充实  UI。

在初始 src/App.js 文件中,我们导入了三个基本组件:

怎么快速构建优异的React搜索体验

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

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

  • PagingInfo:在当前页面上显示信息。

  • ResultsPerPage:配置在每一个页面上显示的结果数。

  • Paging:导航不同的页面。

  • Facet:以数据类型特有的方式筛选和浏览数据。

  • Sorting:重新排定给定字段的结果。

怎么快速构建优异的React搜索体验

导入后,组件可以放入到 Layout 中。

Layout 组件将页面分为多个部分,各组件可以通过属性放入这些部分中。

它包含以下部分:

  • Header:搜索框/搜索栏

  • bodyContent:结果容器

  • sideContent:侧栏,其中包含分面和排序选项

  • bodyHeader:围绕结果包含了上下文丰富的信息,例如当前页面和每一页面上的结果数量

  • bodyFooter:用于在页面之间快速导航的分页选项

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

例如,我们在 configurationOptions 中描述了五个分面维度,因此,我们将创建五个 Facet 组件。每个 Facet  组件都将使用一个“field”属性作为返回数据的键。

我们将它们以及 Sorting 组件放入 sideContent 部分中,然后将 Paging、PagingInfo 和 ResultsPerPage  组件放入最适合它们的部分中:

怎么快速构建优异的React搜索体验

现在,让我们看一下本地开发环境中的搜索体验。

好多了!我们有了很多选项来浏览搜索结果。

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

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

“自动完成”功能。

自动完成

搜索人员喜欢自动完成,因为它可以提供即时反馈。它的建议有两种方式:结果和查询。根据方式的不同,搜索人员将收到相关结果或生成结果的潜在查询。

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

这需要做两项快速更改。

首先,需要将自动完成添加到 configurationOptions 对象:

怎么快速构建优异的React搜索体验

其次,需要将自动完成作为 SearchBox 的一个函数启用:

怎么快速构建优异的React搜索体验

好了,就这么简单。

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

到此,关于“怎么快速构建优异的React搜索体验”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


文章名称:怎么快速构建优异的React搜索体验
网页URL:http://pwwzsj.com/article/jsdioi.html