使用Fuse.js將動態搜索添加到React應用
Fuse.js是一個輕量級的搜索引擎，可以在用戶的瀏覽器中的客戶端運行。讓我們看看如何使用它來輕松地為React應用添加搜索功能。
何時使用Fuse.js
搜索功能對很多類型的網站都很有用，可以讓用戶高效地找到他們想要的東西。但為什么我們會專門選擇使用Fuse.js呢?
為搜索提供動力的選擇有很多，最簡單的可能是使用現有的數據庫。例如，Postgres有一個全文搜索功能。MySQL也有，Redis也有RediSearch模塊。
還有一些專門的搜索引擎，其中Elasticsearch和Solr是最受歡迎的。這些搜索引擎需要更多的設置，但它們擁有你的用例可能需要的高級功能。
最后，你可以使用Algolia或Swiftype等搜索即服務平臺。這些服務運行自己的搜索基礎架構。你只需通過API提供數據、配置和查詢。
但是，您可能不需要這些解決方案所暴露的能力，這可能需要大量的工作來實現，更不用說成本了。如果沒有太多的數據需要搜索，Fuse.js需要最小的設置，并且可以提供比您自己可能想到的更好的搜索體驗。
至于多少數據對Fuse.js來說是過多的，考慮到Fuse.js需要訪問整個數據集，所以你需要在客戶端全部加載。如果數據集的大小是100MB，那就超出了發送給客戶端的合理范圍。但如果它只有幾千字節，它可能是Fuse.js的一個很好的候選者。
構建一個Fuse.js + React演示應用程序
讓我們做一個基本的React應用，使用Fuse.js讓用戶搜索狗的品種。你可以在這里查看最終的結果，源代碼可以在GitHub上找到。
我們將從設置一些腳手架開始。從一個新的Node.js項目開始，我們將安裝React和Fuse.js：
- npm install --save react react-dom fuse.js
- //or
- yarn add react react-dom fuse.js
我們還將安裝Parcel作為開發依賴項：
- npm install --save-dev parcel@2.0.0-beta.1
- //or
- yarn add --dev parcel@2.0.0-beta.1
我們將在 package.json 啟動腳本中使用它來編譯應用程序：
- {
- "scripts": {
- "start": "parcel serve ./index.html --open"
- }
- }
接下來，我們將創建一個barebones index.html，其中包含一個空的 div 供React渲染，以及一個 noscript 消息，以避免在用戶禁用JavaScript時出現空白頁面。
- <!DOCTYPE html>
- <html lang="en">
- <body>
- <div id="app"></div>
- <noscript>
- <p>Please enable JavaScript to view this page.</p>
- </noscript>
- <script src="./index.js"></script>
- </body>
- </html>
我們將使我們的 index.js 簡單的開始。我們將渲染一個有搜索查詢輸入的表單，盡管我們還不會實際處理搜索。
- import React, { useState } from "react";
- import ReactDom from "react-dom";
- function Search() {
- return (
- <form>
- <label htmlFor="query">Search for a dog breed:</label>
- <input type="search" id="query" />
- <button>Search</button>
- </form>
- );
- }
- ReactDom.render(<Search />, document.getElementById("app"));
此時，如果你運行 npm run start 或 yarn run start，Parcel應該會在瀏覽器中打開網站，你應該會看到這個表單。
實施搜索
現在開始實施搜索，我們將從顯示搜索結果的組件開始。我們需要處理三種情況：
- 用戶尚未執行搜索時
- 沒有查詢結果時(因為我們不希望用戶認為某些問題)
- 什么時候有結果顯示
我們將在ordered list中顯示所有結果。
- function SearchResults(props) {
- if (!props.results) {
- return null;
- }
- if (!props.results.length) {
- return <p>There are no results for your query.</p>;
- }
- return (
- <ol>
- {props.results.map((result) => (
- <li key={result}>{result}</li>
- ))}
- </ol>
- );
- }
我們也來編寫自己的搜索函數。稍后，我們將能夠將我們的簡單方法的結果與Fuse.js的結果進行比較。
我們的方法很簡單：我們將遍歷犬種數組(來自這個JSON列表)，并返回包含整個搜索查詢的所有犬種。我們還會讓所有東西都小寫，這樣搜索就不區分大小寫了。
- const dogs = [
- "Affenpinscher",
- "Afghan Hound",
- "Aidi",
- "Airedale Terrier",
- "Akbash Dog",
- "Akita",
- // More breeds..
- ];
- function searchWithBasicApproach(query) {
- if (!query) {
- return [];
- }
- return dogs.filter((dog) => dog.toLowerCase().includes(query.toLowerCase()));
- }
接下來，讓我們將所有內容鏈接在一起，方法是從表單提交中獲取搜索查詢，然后執行搜索并顯示結果。
- function Search() {
- const [searchResults, setSearchResults] = useState(null);
- return (
- <>
- <form
- onSubmit={(event) => {
- event.preventDefault();
- const query = event.target.elements.query.value;
- const results = searchWithBasicApproach(query);
- setSearchResults(results);
- }}
- >
- <label htmlFor="query">Search for a dog breed:</label>
- <input type="search" id="query" />
- <button>Search</button>
- </form>
- <SearchResults results={searchResults} />
- </>
- );
- }
添加Fuse.js
使用Fuse.js很簡單，我們需要導入它，讓它使用 new Fuse() 對數據進行索引，然后使用索引的搜索功能。搜索會返回一些元數據，所以我們將只提取實際的項目進行展示。
- import Fuse from "fuse.js";
- const fuse = new Fuse(dogs);
- function searchWithFuse(query) {
- if (!query) {
- return [];
- }
- return fuse.search(query).map((result) => result.item);
- }
元數據包括一個 refIndex 整數，讓我們可以回溯到原始數據集中的相應項目。如果我們用 new Fuse(dogs, {includeScore: true}) 初始化索引，我們也會得到匹配分數：一個介于0和1之間的值，其中0是完全匹配。那么“Husky”的搜索結果就會像這樣：
- [
- {
- item: "Siberian Husky",
- refIndex: 386,
- score: 0.18224241177399383
- }
- ]
我們將在 Search 組件的表單中添加一個復選框，讓用戶選擇是否使用Fuse.js而不是基本的搜索函數。
- <form
- onSubmit={(event) => {
- event.preventDefault();
- const query = event.target.elements.query.value;
- const useFuse = event.target.elements.fuse.checked;
- setSearchResults(
- useFuse ? searchWithFuse(query) : searchWithBasicApproach(query)
- );
- }}
- >
- <label htmlFor="query">Search for a dog breed: </label>
- <input type="search" id="query" />
- <input type="checkbox" name="fuse" />
- <label htmlFor="fuse"> Use Fuse.js</label>
- <button>Search</button>
- </form>
現在我們可以用Fuse.js進行搜索了!我們可以使用復選框來比較使用它和不使用它。
最大的區別在于Fuse.js可以容忍錯別字(通過近似字符串匹配)，而我們的基本搜索則需要精確匹配。如果我們把“retriever”拼錯為“retreiver”，請查看基本搜索結果。
以下是針對同一查詢更有用的Fuse.js結果：
搜索多個字段
如果我們關心多個字段，我們的搜索可能會更復雜。例如，想象一下，我們想通過品種和原產國來搜索。Fuse.js支持這種用例。當我們創建索引時，我們可以指定要索引的對象鍵。
- const dogs = [
- {breed: "Affenpinscher", origin: "Germany"},
- {breed: "Afghan Hound", origin: "Afghanistan"},
- // More breeds..
- ];
- const fuse = new Fuse(dogs, {keys: ["breed", "origin"]});
現在，Fuse.js將同時搜索 breed 和 origin 字段。
總結
有時候，我們不想花費資源去建立一個完整的Elasticsearch實例。當我們有簡單的需求時，Fuse.js可以提供相應的簡單解決方案。而正如我們所看到的，將它與React一起使用也是很簡單的。
即使我們需要更高級的功能，Fuse.js也允許給不同的字段賦予不同的權重，添加 AND 和 OR 邏輯，調整模糊匹配邏輯等等。當你下次需要在應用中添加搜索功能時，可以考慮使用它。
