reactivesearch

反应式搜索

Elasticsearch、OpenSearch、Solr、MongoDB 的 UI 组件库：可用于 React 和 Vue

了解如何构建电子商务搜索 UI

a.) 使用 React，或 b.) 使用 Vue

如果您正在为其他 JS 框架、React Native 或 Flutter 构建搜索 UI，请查看 Searchbox。

---

请访问reactiveapps.io 查看 ReactiveSearch 市场。

草图的网页设计师模板。

用于草图的 iOS 和 Android 设计器模板。

总有机碳

1. 反应式搜索：简介
2. 特征
3. 组件游乐场
4. 实例
5. 与其他项目的比较
6. 安装
7. 文档 手册
8. 贡献
9. 您可能喜欢的其他项目

1.ReactiveSearch：简介

ReactiveSearch 是一个适用于 React 和 Vue 的 UI 组件库，旨在与 ReactiveSearch 云配合使用。它有 20 多个 UI 组件，包括列表、范围、搜索 UI、结果显示、AI 答案、图表以及将现有 UI 组件引入库的方法。

UI 组件可用于对索引进行过滤或搜索。例如：

• SingleList传感器组件根据所选项目应用精确匹配过滤器。
• RangeSlider组件根据从 UI 中选择的值应用数字范围查询。
• SearchBox组件根据用户键入的搜索词应用建议和搜索查询。

UI 组件可以一起使用（ react prop 允许在每个组件级别上配置它）并通过结果显示 UI 组件呈现匹配结果。

ReactiveSearch支持以下内置显示组件来显示结果（也称为命中）：

1. ReactiveList - ReactiveList 支持列表和卡片显示格式，并允许在项目和组件级别进行自定义渲染，
2. ReactiveMap - ReactiveMap 提供 Google Maps 和 OpenStreetMaps 的选择用于地图渲染，
3. AIAnswer - AIAnswer 通过搜索引擎和 OpenAI 模型提供检索增强生成 (RAG)，以及
4. ReactiveChart - 由 Apache E-Charts 提供支持，ReactiveChart 提供 5 种内置图表类型：饼图、条形图、直方图、折线图、散点图以及 Apache E-Charts 格式的其他图表。目前，ReactiveChart 仅支持 React。

2. 特点

设计

• UI 组件的查询生成和react能力允许创建复杂的 UI，其中许多 UI 组件可以根据用户交互进行反应式更新。
• 该库处理 UI 交互到搜索意图查询的转换。
• 附带有作用域和样式的组件，支持className`` and insideClass` 属性。
• 可通过ThemeProvider进行主题化。

易于使用

• 使用 npm i @appbaseio/reactivesearch 进行一步安装，
• 可以轻松扩展的样式和范围组件，
• 请参阅反应式搜索入门应用程序。

？ ReactiveSearch API：保护您的搜索查询

从 ReactiveSearch v4（当前主要版本）开始，库仅发送搜索意图，其规范位于此处 - ReactiveSearch API ref。根据您在 ReactiveSearch 云中配置的搜索引擎的选择，ReactiveSearch 云将生成搜索查询 DSL。这种方法既更安全，也允许在服务器端传输搜索业务逻辑。

如果您使用的是 ReactiveSearch v3（最后一个主要版本），则可以选择加入功能，通过 ElasticSearch 的查询 DSL 使用 ReactiveSearch API。您需要在ReactiveBase组件中将enableAppbase属性设置为true 。这假设您使用 appbase.io 作为后端。

我们建议您查看这个 KitchenSink 应用程序，它演示了如何使用所有 ReactiveSearch 组件的ReactiveSearch API 。

⬆ 返回顶部

3. 组件游乐场

在 Playground 尝试实时组件 Playground 故事。留意故事游乐场部分的旋钮部分，调整每个道具并查看效果。

4. 现场演示

一组受现实世界应用程序启发、使用 ReactiveSearch 构建的现场演示。

网络

• demos/booksearch - 基于好书数据集的图书搜索应用程序。
• BookSearch with Antd - 演示如何使用 Ant 设计的主题和 UI 组件与 ReactiveSearch
• 电子商务电影搜索 - 展示电子商务电影搜索 UI 的演示
• 仪表板搜索和图表 - 具有用户身份验证的演示：登录、搜索和图表 UI。

您可以在网站的示例部分查看所有这些内容。

⬆ 返回顶部

5. 与其他项目的比较

在这里，我们分享ReactiveSearch与具有类似目标的其他项目的比较。

#	反应式搜索	搜索套件	即时搜索
后端	Elasticsearch、OpenSearch、Solr、MongoDB、OpenAI	托管在任何 Elasticsearch 集群上的任何 Elasticsearch 索引。	为专有搜索引擎 Algolia 定制。
发展	积极开发和维护。	积极的问题响应，一些开发和维护。	积极开发和维护。
入职经验	入门应用程序、实时交互式教程、入门指南、组件游乐场，每个组件都有带有codesandbox的实时工作演示。	入门教程，没有实时组件演示，许多组件的参考规范稀疏。	入门应用程序、入门指南、组件游乐场。
造型支持	样式化和范围化的组件。无需外部 CSS 导入。支持丰富的主题作为 React props。	基于 CSS 的 BEM 样式，不限于组件。 SCSS 支持主题化。	基于CSS的样式，需要外部样式导入。通过操作 CSS 支持主题。
组件类型	列表、范围、搜索、日期、地图、结果显示。可以使用您自己的 UI 组件。	列表、范围、搜索*、结果*。无法使用您自己的 UI 组件。 （搜索和结果只有一个组件，导致需要编写更多代码来实现可定制性）	列表、范围、搜索、结果。可以使用您自己的 UI 组件。
支持的分发平台	React、Vue for Web、React Native for mobile。	为网络做出反应。	React、Vue、Angular、用于 Web 的 vanilla JS、用于移动设备的 React Native，但后者没有 UI 组件。

我们欢迎对此部分做出贡献。如果您正在构建一个项目或者您知道类似空间中的另一个项目，请告诉我们，我们将更新比较。

⬆ 返回顶部

6. 安装

安装 ReactiveSearch 只是一个命令。

• 如果您正在使用 React 的reactivesearch

 npm install @ appbaseio / reactivesearch

您可以在此处查看 React 快速入门指南。

• 如果您使用 Vue 的反应式搜索

 npm install @ appbaseio / reactivesearch - vue

您可以在此处查看 Vue 的快速入门指南。

7. 文档手册

React 库的官方文档位于 docs.reactivesearch.io/docs/reactivesearch/react。

这些组件分为四个部分：

• 基于列表的 UI 组件位于reactivesearch/react/list。
• 基于范围的 UI 组件位于reactivesearch/react/range。
• 搜索 UI 组件位于reactivesearch/react/search。
• 结果组件位于reactivesearch/react/result。
• 地图组件位于reactivesearch/react/map。
• 图表组件位于reactivesearch/react/chart。

该库的 Vue 版本的文档可在 docs.reactivesearch.io/docs/reactivesearch/vue 获取。

⬆ 返回顶部

8. 贡献

请查看贡献指南。

9.您可能喜欢的其他项目

• ReactiveSearch API用于 ElasticSearch、OpenSearch、Solr、MongoDB、OpenAI 的 API 网关（开箱即用的安全性、速率限制功能、记录分析和请求日志）。

• searchbox一个轻量级且注重性能的搜索框 UI 库，用于使用 ReactiveSearch Cloud 查询和显示结果。

  • 香草JS
  • 扑

• dejavu Elasticsearch / OpenSearch 数据查看器和编辑器

• appbase-js当您需要对 UI 组件之外的数据进行索引时

⬆ 返回顶部