前言
搜索引擎是现代Web应用程序中至关重要的一部分，为用户提供快速、准确的搜索结果。为了快速搭建搜索引擎，一个称之为 Elastic Search 业界知名度很高的搜索引擎解决方案。基于 Elastic Search 的每日构建，@elastic/react-search-ui npm 包为 React 提供了一种快速搭建开箱即用的搜索应用程序的选项。
本文将介绍如何使用 @elastic/react-search-ui 包搭建基于 Elastic Search 的搜索页面，帮助你快速上手并理解其核心概念。
环境搭建
@elastic/react-search-ui 包是一个 React 和 Elastic Search 的内置搜索引擎方案，安装非常简单。在使用前需要先安装 react 和 react-dom 。
- 安装依赖项:
$ npm install react react-dom @elastic/react-search-ui
- 导入所需的 React 组件:
-- -------------------- ---- ------- ------ - --------------- ----------- ---------- -------- ------- -------- ------ --- -- ---- - ---- ---------------------------
搜索页面的基本模板
搭建搜索页面的第一步，是使用 Elastic Search 提供的 RESTful API 进行搜索请求。你所需要的仅仅是一个普通的表单，以及将搜索词汇提交到 API 的处理函数。
-- -------------------- ---- -------
------ - -------- - ---- --------
-------- ------------ -
----- ------- --------- - -------------
----- ------------ - ------- -- -
-----------------------
-- -- ------- ------ --- -------
--
------ -
----- ------------------------
------ ------------- ------------- ------------- -- ------------------------- --
------- -----------------------------
-------
--
-关联 @elastic/react-search-ui
现在，让我们为搜索页面集成 @elastic/react-search-ui 包。
- 在 SearchPage 组件包装一个
SearchProvider组件，将你的 Elastic Search 实例作为参数传递：
-- -------------------- ---- -------
------ - --------------- --- - ---- ---------------------------
------ - --------------------- - ---- ---------------------------
-------- ------------ -
------ -
--------------- --------------------------------------
------
--- ------ ------ ---
-------
-----------------
--
-WithSearch组件，负责将搜索状态和相关的回调函数注入到其指定的子组件中。这个例子中，Results组件将用于渲染搜索结果：
-- -------------------- ---- -------
------ - ----------- -------- --- - ---- ---------------------------
-------- --------------- - ------ -------- --- -
-------- ------------ -
------ -
--------------- --------------------------------------
----------- --------------------- ----------- ------------- -- -- -- ----------- ------------- ----
------
--- ------ ------ ---
-------
-------------- --
-------------
-----------------
--
-现在，搜索页已经被集成到了 @elastic/react-search-ui 组件之中。在这个基础上，你可以很简单的调整样式、增加高级搜索功能，甚至将搜索结果导出为 CSV 格式。
搜索框组件
你可以在你的搜索页面上添加一个搜索框以便输入搜索关键词。@elastic/react-search-ui中的SearchBox组件提供了搭建搜索框所需的一切。
-- -------------------- ---- -------
------ - --------- - ---- ---------------------------
-------- ------------ -
------ -
--------------- --------------------------------------
----------- --------------------- ----------- ------------- -- -- -- ----------- ------------- ----
------
---------- --
-------
-------------- --
-------------
-----------------
--
-你也可以自定义输入框的行为，例如显示搜索按钮或显示占位符：
-- -------------------- ---- -------
------ - --------- - ---- ---------------------------
-------- ----------------- -
------ -
----------
-------------
------------ ------- --- - ------------
--
---------------------- -- ------------------------
--
--
-结果组件
Results 组件负责将 Elastic Search 的结果呈现为可点击的链接。标准情况下，Results 组件会使用所选数据源的 _source 字段呈现结果。你可以定制如何渲染结果，例如将产品名称设置为加粗的文本。
-- -------------------- ---- -------
------ - ------- - ---- ---------------------------
-------- ------------------- ------ -- -
------ --------------------------------
-
-------- ------------ -
------ -
--------------- --------------------------------------
----------- --------------------- ----------- ------------- -- -- -- ----------- ------------- ----
------
---------- --
-------
-------- -------------------------------------------- -------------- ------ -- -- ------------------ --------------- --- --
-------------
-----------------
--
-分页组件
要在搜索页面上添加分页，使用 pagingInfo 映射参数 传递分页信息。Paging 组件用于渲染分页控件。
-- -------------------- ---- -------
------ - ------ - ---- ---------------------------
------ - ---------------- - ---- ------------------
-------- ------------ -
------ -
--------------- --------------------------------------
----------- --------------------- ----------- ------- -- -- -- ----------- ------- ----
------
---------- --
------- ----------- ------------------------ --
-------
-------- -------------------------------------------- -------------- ------ -- -- ------------------ --------------- --- --
------- ----------- ------------------------ --
-------------
-----------------
--
-排序组件
如果你想更好地控制搜索结果的排序，Sorting 组件将为用户提供选择排序方式的下拉菜单。
-- -------------------- ---- -------
------ - ------- - ---- ---------------------------
-------- ------------ -
------ -
--------------- --------------------------------------
----------- --------------------- ------------ ------------------- --------------------- -- -- -- ------------ ------------------- --------------------- ----
------
---------- --
-------- ------------ ---- --
-------
-------- -------------------------------------------- -------------- ------ -- -- ------------------ --------------- --- --
------- ----------- ------------------------ --
-------------
-----------------
--
-筛选组件
搜索结果筛选是搜索页面中常用的一种功能，Facet 和 FacetGroup 组件可用于增加筛选选项。
-- -------------------- ---- -------
------ - ------ ---------- - ---- ---------------------------
-------- ------------ -
------ -
--------------- --------------------------------------
----------- --------------------- ----------- -------- ------------- -- -- -- ----------- -------- ------------- ----
------
---------- --
----------- ---------------- ---------------------
------ ---------------- ---------------- --
-------------
-------
-------- -------------- ------ -- -- ------------------ --------------- --- --
------- ----------- ------------------------ --
-------------
-----------------
--
-示例代码
本文描述的所有代码均可以在 CodeSandbox 中找到。
总结
@elastic/react-search-ui 是一个构建 Elastic Search 搜索引擎的 React 组件库。该库的设计目标是根据常见的搜索用例和最佳实践来帮助开发人员快速构建一个高效的搜索页面。
在这篇文章中，你学习到在 React 应用程序中使用 @elastic/react-search-ui 包搭建搜索页面的基础知识。它提供了易用的组件库和强大的可定制性，用于通过 Elastic Search API 构建高效，灵活的搜索应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/114690