如何快速構建優異的 React 搜索體驗

如何快速構建優異的 React 搜索體驗
做者Jason Stoltzfus

構建搜索體驗是一項艱鉅的任務。它初看起來很簡單：構建搜索欄，將數據放入數據庫，而後讓用戶輸入內容對數據庫進行查詢。可是，在數據建模、基礎邏輯，固然還有整體設計和用戶體驗方面，還有許多事情須要考慮。

咱們接下來介紹如何使用 Elastic 的開源 Search UI庫構建出色的基於 React 的搜索體驗。整個過程大約須要 30 分鐘，完成後，您便可將搜索體驗引入任何須要它的應用程序當中。

可是首先要考慮一下，是什麼讓構建搜索變得如此具備挑戰性的？

搜索是艱鉅的

幾周前，曾熱傳過一篇很棒的名爲 Falsehoods Programmers Believe About Search（關於搜索編程人員相信的謊話）的文章。文章中列出了開發人員在開發搜索時所考慮的一系列錯誤假設。

下列是幾種不少人相信的謊話：

• 「知道搜索內容的客戶會按照您指望的方式去搜索。」
• 「您能夠編寫一個始終可以成功解析查詢的查詢解析器。」
• 「設置好以後，搜索即可以在下週按照相同的方式去搜索。」
• 「同義詞簡單易用。」
• ……還有許多其餘值得了解的亮點，您應當找來一讀！

須要注意的是，搜索有許多的挑戰，並且這些挑戰不只僅在幕後。您須要思考如何管理狀態，構建用於篩選、分面、排序、分頁、同義詞、語言處理的組件，以及更多其餘方面的事情。可是，總而言之：

構建優異的搜索須要通過兩個複雜的部分：(1) 搜索引擎，它提供支持搜索的 API；(2) 搜索庫，它豐富搜索體驗。

關於搜索引擎，咱們將基於 Elastic 應用搜索進行介紹。

關於搜索體驗，咱們將介紹 OS 搜索庫：Search UI。

當咱們完成時，將生成相似如下所示的頁面

搜索引擎：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. 將 configurationOptions 傳入 SearchProvider。
2. 將一些結構構建塊放入 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 的一個函數啓用：

好了，就這麼簡單。

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

總結

如今，咱們擁有了外觀好看、功能完善的搜索體驗，並且還避免了一大堆人們在嘗試實施搜索時會掉入的陷阱。30 分鐘的講解還不錯，是否是？

Search UI是靈活的現代 React 框架，可用於快速開發搜索體驗。Elastic 應用搜索是 Elasticsearch 中內置的強大搜索引擎。這是一項付費的託管服務，或者經過一個足夠用的基本許可，您也能夠免費運行它。

---

想要更多瞭解Elastic技術，歡迎關注和報名參加webinar，近期安排以下：

2020年2月19日（星期三）15:00-16:00
使用Elastic Stack構建全方位可觀察性實例

2020年2月26日（星期三）15:00-16:00
Kibana Lens 網絡研討會

2020年3月4日（星期三）15:00-16:00
Elastic Endpoint Security 概述網絡

2020年3月11日（星期三）15:00-16:00
使用Elastic Stack監控網站資源