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 元件以外的資料進行索引時

⬆ 回到頂部