使用Fuse.js將動態搜索添加到React應用

作者：杭州程序員小張 2021-05-31 08:59:22

移動開發 Android

Fuse.js是一個輕量級的搜索引擎，可以在用戶的瀏覽器中的客戶端運行。讓我們看看如何使用它來輕松地為React應用添加搜索功能。

[[402547]]

何時使用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 邏輯，調整模糊匹配邏輯等等。當你下次需要在應用中添加搜索功能時，可以考慮使用它。

責任編輯：趙寧寧來源：今日頭條