怎么快速構建優異的React搜索體驗

這篇文章主要介紹“怎么快速構建優異的React搜索體驗”，在日常操作中，相信很多人在怎么快速構建優異的React搜索體驗問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么快速構建優異的React搜索體驗”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

搜索引擎：Elastic 應用搜索

Elastic  應用搜索可作為一項付費的托管服務或免費的自管型分發提供。在本教程中，我們將使用托管服務，但請記住，如果您自己托管的話，您的團隊可以通過基本許可_免費_使用  Search UI 和應用搜索。

計劃：將代表有史以來最好的電子游戲的文檔索引到搜索引擎中，然后設計并優化搜索體驗，以搜索它們。

首先，注冊以獲得 14 天的試用期 — 不需要信用卡。

創建一個引擎。有 13 種不同的語言可供選擇。

我們將它命名為 video-games，并將語言設為 English(英語)。

下載 best video games data set(最佳電子游戲數據集)，然后使用導入程序將其上傳到應用搜索。

接下來，單擊“Engine”(引擎)，然后選擇 Credentials(憑據)選項卡。

創建一個新的具有有限引擎訪問權限的公共搜索密鑰，以只能訪問 video-games 引擎。

檢索這個新的公共搜索密鑰和您的主機標識符。

雖然看起來不怎么樣，但我們現在有了一個功能齊全的搜索引擎，可以使用優化的搜索 API 來搜索我們的電子游戲數據了。

下列是截止現在我們已完成的操作：

• 創建了搜索引擎

• 采集了文檔

• 創建了默認架構

• 檢索了可公開給瀏覽器的、限定范圍的一次性憑據

這些是截至現在針對應用搜索所做的操作。

下面我們使用 Search UI 開始構建搜索體驗。

搜索庫：Search UI

我們將使用 create-react-app 支架實用工具來創建 React 應用：

在此基礎上，我們將安裝 Search UI 和應用搜索連接器：

在開發模式下啟動應用：

使用您喜愛的文本編輯器打開 src/App.js。

我們將從一些樣本代碼開始入手，將其解包。

注意備注!

第 1 步：導入語句

我們需要導入 Search UI 依賴項和 React。

核心組件、連接器和視圖組件包含在三個不同的包中：

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

• @elastic/react-search-ui

• @elastic/react-search-ui-views

隨著課程的進行，我們將了解每個包的更多信息。

此外，我們還將為這個項目導入默認樣式表，這樣我們無需編寫自己的 CSS 行便可獲得良好的外觀和感覺：

第 2 步：連接器

我們從應用搜索獲取了公共搜索密鑰和主機標識符。

現在是使用它們的時候了!

Search UI 中的連接器對象使用憑據與應用搜索掛鉤并支持搜索：

Search UI 可與任何搜索 API 協同工作。但是有了連接器，搜索 API 不需要任何更深層配置，便可以正常工作。

第 3 步：configurationOptions

在深入探討 configurationOptions 之前，我們花點時間認真思考一下。

我們將一組數據導入了搜索引擎。但是，這是什么樣的數據呢?

我們對數據了解越多，就越能知道如何將數據提供給搜索人員，并能知曉如何配置搜索體驗。

讓我們看一個對象，它是這個數據集中最好的對象：

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:

我們已將 Search UI 連接到搜索引擎，接下來選擇管理搜索數據、顯示結果和瀏覽結果的方式。但是，我們需要一些東西將所有內容與 Search UI  的動態前端組件聯系起來。

第 4 步：SearchProvider

這是控制所有內容的對象。SearchProvider 是嵌套所有其他組件的位置。

Search UI 提供了 Layout 組件，用于繪制典型的搜索布局。另有一些深入定制選項，但我們在此教程中不做深入介紹。

我們將做兩件事情：

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2. 將 configurationOptions 傳入 SearchProvider。

3. 將一些結構構建塊放入 Layout，并添加兩個基本組件：SearchBox 和 Results。

目前，我們已在前端完成基本設置工作。后端還有一些額外細節需要處理，然后我們才能運行。我們還應該研究相關度模型，以便根據這個項目的獨特需求對搜索進行微調。

退出到應用搜索……

回到實驗室

應用搜索具有強大而優化的搜索引擎功能，能夠使一度復雜的調整變得更加有趣。通過幾次單擊，便可以執行精細的相關度調整和無縫架構更改。

我們將首先調整架構來查看它的實際情況。

登錄應用搜索引擎，然后單擊 Manage(管理)部分下的 Schema(架構)。

此時將顯示架構。11 個字段中的每個字段都默認為 text(文本)。

在 configurationOptions 對象中，我們定義了兩個范圍分面來幫助按數字搜索：user_score 和  critic_score。為了使范圍分面按預期工作，字段類型需要設為數字。

單擊每個字段旁的下拉菜單，將其改為 number(數字)，然后單擊 Update Types(更新類型)：

引擎即刻重新索引。稍后，當我們將分面組件添加到布局中時，范圍篩選器將按我們預期的方式工作。現在，看看真正實用的功能。

本部分非常重要

有三個關鍵的相關度功能：同義詞、管理和相關度調整。

選擇側欄中 Search Settings(搜索設置)部分下的每項功能：

同義詞

有些人開轎車，有些人開汽車，有些人可能開老爺車。互聯網是全球性的，世界各地的人們用不同的詞語來描述事物。同義詞可幫助您創建一組被認為是相同的術語。

在電子游戲搜索引擎案例中，我們知道人們想要查找 Final Fantasy。但他們可能只鍵入 FF。

單擊 Synonyms(同義詞)，選擇 Create a Synonym Set(創建同義詞集)，然后輸入這些術語：

單擊 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(隱藏結果)按鈕 — 帶貫穿線的眼睛圖標：

現在，搜索 Final Fantasy 或 FF 將會看到 Final Fantasy VII 排在首位，

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

我們可以提升和隱藏多個文檔。我們甚至可以對提升的文檔進行排序，以便完全控制每個查詢頂部顯示的內容。

相關度調整

單擊側欄中的 Relevance Tuning(相關度調整)。

我們搜索一個文本字段：name 字段。但是，如果我們擁有多個要搜索的文本字段(例如 name 字段和 description  字段)，該怎么辦?我們使用的電子游戲數據集不包含 description 字段，因此，我們將偽造一些文檔來仔細考慮這個字段。

假設文檔類似如下：

如果某人想要查找游戲 Magical Quest，則會輸入它作為查詢。但是，第一個結果將是 Dangerous Quest：

為什么會這樣?這是因為“magical”一詞在 Dangerous Quest 的描述中出現了三次，搜索引擎不知道這個字段比另一個字段更重要。于是，它將  Dangerous Quest 排得更靠前。這就是要進行相關度調整的原因。

我們可以在其他內容中選擇一個字段，然后提高其相關度權重：

我們可以看到，在提高權重后，正確的項 Magical Quest 上升到頂部，因為 name 字段變得更重要。我們要做的就是將滑塊拖動到更高值，然后單擊  Save(保存)。

現在，我們使用應用搜索執行下列操作：

• 調整架構，將 user_score 和 critic_score 更改為 number 字段。

• 精細調整相關度模型。

至此，我們就介紹完了這些巧妙而先進的“儀表板”功能 — 每項功能都有匹配的 API 端點，如果您不喜歡 GUI，則可以使用 API  端點以編程方式運行各功能。

現在，讓我們完成 Search UI 的介紹。

收尾工作

現在，您的 UI  應該可以正常運行了。嘗試進行一些查詢，看看結果如何。首先，我們缺少一些工具來探索我們的結果，例如，篩選、分面、排序等等，但是可以搜索了。我們需要充實  UI。

在初始 src/App.js 文件中，我們導入了三個基本組件：

根據我們對配置選項定義的內容，讓我們再添加一些組件。

導入以下組件將會啟用 UI 中缺失的功能：

• PagingInfo：在當前頁面上顯示信息。

• ResultsPerPage：配置在每一個頁面上顯示的結果數。

• Paging：導航不同的頁面。

• Facet：以數據類型特有的方式篩選和瀏覽數據。

• Sorting：重新排定給定字段的結果。

導入后，組件可以放入到 Layout 中。

Layout 組件將頁面分為多個部分，各組件可以通過屬性放入這些部分中。

它包含以下部分：

• Header：搜索框/搜索欄

• bodyContent：結果容器

• sideContent：側欄，其中包含分面和排序選項

• bodyHeader：圍繞結果包含了上下文豐富的信息，例如當前頁面和每一頁面上的結果數量

• bodyFooter：用于在頁面之間快速導航的分頁選項

組件呈現數據。數據是根據我們在 configurationOptions 中提供的搜索設置進行獲取的。現在，我們將每個組件放入相應的 Layout  部分。

例如，我們在 configurationOptions 中描述了五個分面維度，因此，我們將創建五個 Facet 組件。每個 Facet  組件都將使用一個“field”屬性作為返回數據的鍵。

我們將它們以及 Sorting 組件放入 sideContent 部分中，然后將 Paging、PagingInfo 和 ResultsPerPage  組件放入最適合它們的部分中：

現在，讓我們看一下本地開發環境中的搜索體驗。

好多了!我們有了很多選項來瀏覽搜索結果。

我們添加了一些額外功能，例如，多個排序選項，并且通過添加單一標志使得發布者分面可篩選。嘗試使用一個空查詢進行搜索，從而瀏覽所有選項。

最后，我們看一下搜索體驗的最后一個功能。它就是受歡迎的

“自動完成”功能。

自動完成

搜索人員喜歡自動完成，因為它可以提供即時反饋。它的建議有兩種方式：結果和查詢。根據方式的不同，搜索人員將收到相關結果或生成結果的潛在查詢。

我們將重點介紹自動完成的查詢建議形式。

這需要做兩項快速更改。

首先，需要將自動完成添加到 configurationOptions 對象：

其次，需要將自動完成作為 SearchBox 的一個函數啟用：

好了，就這么簡單。

嘗試搜索一下。當您鍵入時，將顯示自動完成查詢建議。

到此，關于“怎么快速構建優異的React搜索體驗”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！