第一章
什麼是 MiniSearch 以及它如何增強(qiáng) JavaScript 過濾？

MiniSearch 是一個輕量級 JavaScript 函式庫，用於在中小型資料集中進(jìn)行全文搜尋。它對資料進(jìn)行索引並允許高級搜尋功能，例如模糊匹配、前綴搜尋、按相關(guān)性排名和欄位加權(quán)。

透過模糊匹配，模糊匹配意味著找到單字或單字的一部分，即使它們輸入得不完全正確。例如，如果您輸入“wlf”而不是“wolf”，模糊搜尋仍會找到包含“wolf”的結(jié)果。

透過前綴搜索，前綴搜尋會查找某事物開頭的單字或部分。因此，如果您搜尋“汽車”，前綴搜尋也會找到“購物車”或“碳酸飲料”。

miniSearch 為我們提供的這些功能可以幫助我們找到我們正在尋找的內(nèi)容，即使它的輸入不完美。因此，使搜尋結(jié)果更加準(zhǔn)確和有用。

我們?yōu)槭颤N需要它？

它帶給我們的第一個優(yōu)點(diǎn)是進(jìn)階搜尋功能：
傳統(tǒng)過濾通常匹配精確值或基本模式。 MiniSearch 提供更複雜的文字比對。這些進(jìn)階搜尋功能可以猜測您的錯誤，例如如果您輸入“bak”而不是“back”，MiniSearch 就會知道您的意思。

與傳統(tǒng)過濾/搜尋相比，它的另一個優(yōu)勢是相關(guān)性排名：
MiniSearch 會根據(jù)相關(guān)性對結(jié)果進(jìn)行排名，從而改善搜尋密集型應(yīng)用程式中的使用者體驗(yàn)。這可確保最相關(guān)的結(jié)果會先出現(xiàn)。例如，如果您搜尋“JavaScript”，系統(tǒng)會優(yōu)先考慮突出或頻繁提及“JavaScript”的文件或項(xiàng)目，從而改善整體搜尋體驗(yàn)。

現(xiàn)在我們已經(jīng)解決了這個問題，讓我們建立一個基本的 React.js 應(yīng)用程序，看看如何在客戶端使用 MiniSearch。

第二章
如何使用 MiniSearch 設(shè)定 React 應(yīng)用程式：

好的，讓我們來設(shè)定我們的項(xiàng)目。為了我們建立這個項(xiàng)目，我將使用永遠(yuǎn)可靠的 vite。我將使用的文字編輯器或 IDE 是壞傢伙，Visual Studio 程式碼編輯器。

我將在終端機(jī)中按照這些提示設(shè)定 Vite。我必須說，我之前已經(jīng)創(chuàng)建了這些資料夾：

進(jìn)入 Visual_testing 資料夾：

PS C:\Users\vawkei\Documents> cd .\visual_testing\

進(jìn)入building-in-public-slack資料夾：

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

進(jìn)入迷你搜尋資料夾：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

進(jìn)入前端資料夾：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

然後在前端資料夾中，我將安裝 Vite，因?yàn)檫@就是我們想要的位置，在我們的前端資料夾中。

我將用這行程式碼安裝它：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

然後它給了我選擇的選項(xiàng)，我將在這裡選擇 Javascript 和 React。 React 作為框架，Javascript 作為變體。

完成後。迎接我的將是這些：

PS C:\Users\vawkei\Documents> cd .\visual_testing\

然後我將安裝 minisearch 套件和react-router-dom 套件。雖然我在本教學(xué)中不需要react-router套件：

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

也將透過執(zhí)行以下程式碼安裝 scss：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

現(xiàn)在，這不會有後端。相反，我會將資料放置在外部的某個地方。稍後會詳細(xì)介紹。

因此，如果我們現(xiàn)在透過在終端機(jī)中執(zhí)行 npm run dev 來啟動我們的小型應(yīng)用程序，我們將在終端中得到以下回應(yīng)：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

我們必須點(diǎn)擊連結(jié)（按住Ctrl鍵點(diǎn)擊）：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

如果我們按住 Ctrl 鍵：

Done. Now run:

 npm install
 npm run dev

我們將在瀏覽器中看到如下所示的頁面：

第三章
清理 App.jsx":

App.jsx 最初看起來像這樣：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install minisearch react-router-dom

這就是我們在上圖中看到的 React 標(biāo)誌和 vite 標(biāo)誌的原因。但是，我們不想使用 App.jsx 的當(dāng)前內(nèi)容，因此我們必須清理它。清理後，內(nèi)容應(yīng)如下圖所示：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install sass

這將使我們的瀏覽器中出現(xiàn)空白畫面。

第四章
準(zhǔn)備專案：建立模擬資料庫：

通常情況下，我應(yīng)該從資料庫、superbase、firebase 等取得資料。或甚至是某個地方的 API。我將從 json 檔案獲取資料。我將其命名為 db.json。該檔案將位於一個名為 data 的資料夾中，該資料夾應(yīng)該位於我們應(yīng)用程式的根目錄下。 db 檔案的內(nèi)容如下所示：

 VITE v5.4.11 ?ready in 332 ms

 ? ?Local: ? http://localhost:5173/
 ? ?Network: use --host to expose
 ? ?press h + enter to show help

是的！你家的男友是個遊戲玩家。 ？ ？ ？只是想讓你知道我非常想玩這些遊戲。
現(xiàn)在，讓我快速瀏覽一下該文件。

該檔案包含一個帶有部落格條目數(shù)組的 JSON 物件。每個物件代表一個視頻遊戲並具有以下字段：

標(biāo)題：電玩的名稱。

文字：遊戲的簡要說明。

作者：撰寫部落格文章的人。

id: 每篇部落格的唯一識別碼。例如：「1」、「2」、「3」

第五章
使用 JSON 伺服器設(shè)定模擬後端：

要啟動並運(yùn)行資料庫，我們必須進(jìn)入終端。我們可以在終端機(jī)中打開另一個端口，並在終端機(jī)中運(yùn)行以下命令：

http://localhost:5173/

我們得到的回覆是這樣的：

http://localhost:5173/

這表示我們的模擬伺服器/資料庫已準(zhǔn)備好進(jìn)行操作。

第六章
建構(gòu)前端：建立 BlogList 元件：

好吧！現(xiàn)在我將進(jìn)入 src 資料夾並在其中建立組件資料夾。在元件資料夾中，我將建立另一個資料夾，將其命名為 blog。在 blog 資料夾中，我將建立另一個名為 blog-list 的資料夾。在這個部落格清單資料夾中，我將建立兩個檔案。 BlogList.jsx 和 BlogList.module.scss。這裡不會涉及後者。

然後像這樣設(shè)定 BlogList 元件：

PS C:\Users\vawkei\Documents> cd .\visual_testing\

第七章
React 中的路由：在 App.jsx 中渲染 BlogList：

現(xiàn)在我們已經(jīng)建立了 BlogList 的基本結(jié)構(gòu)，我們必須將其連接到 App.jsx，以便它可以在螢?zāi)?瀏覽器上呈現(xiàn)。為此，我們深入研究 App.jsx 文件，並編寫以下程式碼：

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

沒有涉及佈局，因?yàn)樗谶@裡沒有用。

然後在 main.jsx 中，我們將在那裡設(shè)定瀏覽器路由器，如下所示：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

完成所有這些後，App.jsx 中發(fā)生的任何事情現(xiàn)在都可以在我們的瀏覽器/螢?zāi)恢锌吹健?

第八章
回傳BlogList.jsx：
在 BlogList.jsx 中設(shè)定部落格和載入狀態(tài)

在這裡，我將創(chuàng)建一些要使用的狀態(tài)，並且還將從在 localhost:8000 上運(yùn)行的本地伺服器獲取部落格資料。

我要建立的第一個狀態(tài)是部落格。當(dāng)應(yīng)用程式渲染時，它將作為一個空數(shù)組開始，稍後當(dāng)我們從模擬伺服器收到部落格資料時，它將被更新。

然後我將建立的第二個狀態(tài)將用於載入。它將追蹤數(shù)據(jù)是否仍在加載。它以 false 開頭，可以在獲取資料時設(shè)為 true。

嗚嗚嗚嗚：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

第九章
顯示我們所取得的資料：
建構(gòu) Jsx：

首先，我將建立 jsx 元件。為此，我將在返回部分寫下以下內(nèi)容：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

第十章
顯示我們所取得的資料：
useEffect來了：

這沒有多大作用。即使我們在控制臺中獲取數(shù)據(jù)，它也不會顯示在螢?zāi)簧?。為了讓它顯示在螢?zāi)簧?，我們需?React 的壞蛋之一 useEffect 的幫助。

什麼是useEffect？
根據(jù)NetNin??ja 的說法，「這個鉤子在元件的每次渲染時運(yùn)行函數(shù)。請記住，元件在首次載入時最初渲染，並且在狀態(tài)變更時也會發(fā)生。它會重新渲染DOM，因此可以更新瀏覽器中的狀態(tài)（更改後的狀態(tài)）」。

嗚嗚嗚嗚
我們之前寫的 fetchBlogs 函數(shù)，我們將它放在 useEffect 中：

PS C:\Users\vawkei\Documents> cd .\visual_testing\

看起來像電影《全面啟動》嗎？ 冷靜點(diǎn)，我很快就會解釋。不是電影《預(yù)兆》，而是喔！男人們！這是Mern {M.E.R.N}的克里斯多福諾蘭就在這裡。 ???

然後在 Jsx 中，我們將在那裡進(jìn)行編碼：

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

第十二章
MiniSearch 的效果如何：

好的，現(xiàn)在我們可以在螢?zāi)簧箱秩静柯涓窳恕，F(xiàn)在讓我們使用 MiniSearch。整個程式碼將如下所示：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

此程式碼建立 MiniSearch 的新實(shí)例以啟用全文搜尋。它的作用如下：

fields: 指定資料中的哪些欄位（標(biāo)題、作者、文字）將被索引以供搜尋。

storeFields: 定義搜尋結(jié)果中將包含哪些欄位。這些欄位與索引資料一起存儲，以便於檢索。

然後這個：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

此程式碼為我們提供了頁面呈現(xiàn)後已被 miniSearch 索引的文件總數(shù)。

現(xiàn)在，讓我們更進(jìn)一步。頁面呈現(xiàn)，並且當(dāng)它呈現(xiàn)時，部落格狀態(tài)最初為空。我們可以在程式碼中看到這一點(diǎn)：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

?

之後，我們使用 fetchBlogs 函數(shù)取得資料。那裡確實(shí)有數(shù)據(jù)，我們透過尋找以下程式碼就知道有數(shù)據(jù)：

Done. Now run:

 npm install
 npm run dev

現(xiàn)在這個程式碼：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install minisearch react-router-dom

這用於刪除所有先前索引的項(xiàng)目。如果您需要重新索引新資料或清除目前搜尋索引，這非常有用。我們想要重新開始，所以我們使用它。

然後這個：

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install sass

miniSearch.addAll(data) 方法將 data 陣列中的所有項(xiàng)目加入 MiniSearch 索引。

取得資料後，我們透過執(zhí)行以下程式碼來更新部落格：

 VITE v5.4.11 ?ready in 332 ms

 ? ?Local: ? http://localhost:5173/
 ? ?Network: use --host to expose
 ? ?press h + enter to show help

一旦我們更新了部落格狀態(tài)，空的部落格陣列就會被我們的資料填滿。

在這個過程中，我們清理了 miniSearch 實(shí)例，為使用以下程式碼建立索引的新資料提供了空間：

http://localhost:5173/

我們透過執(zhí)行以下程式碼將接收的資料加入其中：

http://localhost:5173/

發(fā)生了所有這些，我們的 miniSearch 實(shí)例應(yīng)該載入數(shù)據(jù)，是的。如果你查看這行程式碼：

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      ? ? ?{" "}
      <div>
        ? ? ? ?{" "}
        <a href="https://vite.dev" target="_blank">
          ? ? ? ? ? <img src={viteLogo} className="logo" alt="Vite logo" />? ? ?
          ?{" "}
        </a>
        ? ? ? ? <a href="https://react.dev" target="_blank">
          ? ? ? ? ?{" "}
          <img src={reactLogo} className="logo react" alt="React logo" />? ? ?
          ?{" "}
        </a>? ? ?{" "}
      </div>
      ? ? ? <h1>Vite + React</h1>? ? ? <div className="card">
        ? ? ? ?{" "}
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}? ? ? ?{" "}
        </button>
        ? ? ? ? <p>
          Edit <code>src/App.jsx</code> and save to test HMR ? ? ? ?{" "}
        </p>? ? ?{" "}
      </div>? ? ? <p className="read-the-docs">Click on the Vite and React logos to learn more ? ? ? </p>
    </>
  );
}
export default App;

它顯示那裡有資料索引。但是，重新渲染頁面後，我們會遺失數(shù)據(jù)，因?yàn)?miniSearch 會重置。我們透過以下程式碼知道這一點(diǎn)：

function App() {
  return <>? ? ?</>;
}

export default App;

看下面，這是我們的 console.log 在渲染時執(zhí)行程式碼時的實(shí)際內(nèi)容。

{
 "blogs": [
 {
 "title": "Wolfenstein",
 "text": "Wolfenstein is a groundbreaking video game series that pioneered the first-person shooter genre. Debuting in 1981, it gained fame with Wolfenstein 3D (1992), placing players in World War II as an Allied spy battling Nazis. Known for its intense gameplay, alternate history, and stealth-action elements, the series continues to evolve with modern reboots and thrilling narratives.",
 "author": "voke",
 "id": "1"
 },
 {
 "title": "Bioshock",
 "text": "BioShock is a critically acclaimed video game series blending first-person shooting with deep storytelling. Set in dystopian worlds like the underwater city of Rapture and floating Columbia, it explores themes of power, morality, and free will. Known for its immersive environments, philosophical depth, and plasmid abilities, BioShock redefined narrative-driven gaming since its debut in 2007.",
 "author": "ese",
 "id": "2"
 },
 {
 "id": "3550",
 "author": "jite",
 "title": "Doom",
 "text": "Doom is a legendary first-person shooter series that revolutionized gaming with its 1993 debut. Players battle demons from Hell across Mars and Earth, armed with iconic weapons like the shotgun and BFG. Known for its fast-paced action, heavy metal soundtrack, and gory visuals, Doom remains a cornerstone of the FPS genre and a cultural phenomenon."
 }
 ]
}

第十四章
解：持續(xù)使用 useRef 進(jìn)行 MiniSearch：

為了防止 miniSearch 在每次渲染時重置，我們將其移至 useRef ，以便相同的實(shí)例在渲染之間保持不變。方法如下：

PS C:\Users\vawkei\Documents> cd .\visual_testing\

此程式碼區(qū)塊可確保使用 useRef 跨渲染保留 MiniSearch 的單一實(shí)例。 miniSearchRef 建立並儲存 MiniSearch 實(shí)例。

有了這個useRef程式碼，我們就可以安心了。

解釋handleSearch函數(shù)：

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

handleSearch 函數(shù)接收使用者輸入的任何內(nèi)容，並使用使用者的輸入更新狀態(tài)查詢。 （事件.目標(biāo).值）。如果輸入為空，則清除結(jié)果狀態(tài)並停止進(jìn)一步處理。然後它使用 miniSearch 來搜尋模糊匹配的索引資料（允許輕微的不匹配）。然後它會更新結(jié)果的狀態(tài)。

第十五章
最終程式碼：
所以我們在 BlogList 中的最終程式碼將如下所示：

從「react」匯入 { useEffect, useRef, useState };
從“./BlogList.module.scss”導(dǎo)入類別；
從“minisearch”導(dǎo)入 MiniSearch；

const BlogList = () =>; {
  //建立部落格和isLoading狀態(tài)。
  const [博客，setBlogs] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  //建立查詢和結(jié)果狀態(tài)。
  const [查詢，setQuery] = useState("");
  const [結(jié)果，setResults] = useState([]);

  // 檢查部落格狀態(tài)是否已滿
  console.log(博客);

  const miniSearchRef = useRef(
    新的迷你搜尋({
      fields: ["title", "author", "text"], // 要搜尋的字段
      storeFields: ["title", "author", "text"], // 要傳回的字段
    })
  ）；
  const miniSearch = miniSearchRef.current;
  console.log("渲染後索引部落格：", miniSearch.documentCount);

  //從我們的模擬資料庫中取得部落格：
  const fetchBlogs = async () =>; {
    setIsLoading(true);

    嘗試 {
      const 回應(yīng) = 等待 fetch("http://localhost:8000/blogs");

      如果（！response.ok）{
        拋出新的錯誤（）；
      }

      const data = 等待response.json();
      控制臺.log(資料);

      miniSearch.removeAll();

      miniSearch.addAll(資料);
      console.log("索引部落格：", miniSearch.documentCount);

      設(shè)定部落格（數(shù)據(jù)）；
    } 捕獲（錯誤）{
      常量訊息 =
        錯誤實(shí)例錯誤？ error.message : "出了點(diǎn)問題";
      控制臺.log(訊息);
    } 最後 {
      setIsLoading(假);
    }
  };

  // 搜尋功能：
  const handleSearch = (事件) => {
    setQuery(event.target.value);

    if (event.target.value.trim() === "") {
      返回 setResults([]);
    }

    console.log(event.target.value);

    const searchResults = miniSearch.search(event.target.value, { 模糊: 0.5 });
    console.log("搜尋結(jié)果:", 搜尋結(jié)果);
    設(shè)定結(jié)果（搜尋結(jié)果）；
  };

  // 有條件地顯示或搜尋結(jié)果或博客
  const displayPosts = results.length > > 0 ?結(jié)果：部落格；

  useEffect(() => {
    取得部落格（）；
  }, []);

  返回 （
    <div>
      ? ? ? <h2>部落格清單</h2>
      {正在載入 && <p>正在載入...</p>}? ? ?{" "}
      <div classname="{classes.search}">
        ? ? ? ?{“”}
        <input placeholder="search" value="{query}" onchange="{handleSearch}">>;? ? ?{“”}
      </div>;
      ? ? ? <div classname="{classes.blogs}">
        {displayPosts.map((博客) => {
          // {blogs.map((blog) => {
          返回 （
            <div>



<p><strong>第十六章</strong><br>
<strong>測試一下：</strong><br>
現(xiàn)在，如果我輸入 Wolfenst，將顯示以下內(nèi)容：</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173282557470183.jpg" class="lazy" alt="Using MiniSearch in React: Advanced Search and Filtering Made Easy"></p>

<p>你可以看到它甚至沒有等我完全拼寫出來就將其過濾掉。 </p>

<p><em>讓我們試試看批判性地輸入：</em></p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173282557528617.jpg" class="lazy" alt="Using MiniSearch in React: Advanced Search and Filtering Made Easy"><br>
Critical 不是標(biāo)題的名稱，但它會搜尋我們的文字並找出其中包含 Critical 一詞的所有內(nèi)容?？梢钥隙ǖ卣f，《生化奇兵》是唯一具有批判性的內(nèi)容。 </p>

<p><strong>最後的想法</strong><br>
感謝您在 MiniSearch 之旅中陪伴我！我真的很感謝您的時間和耐心，我希望本指南有助於導(dǎo)航和理解如何將 MiniSearch 有效地整合到您的 Reactjs 專案中。 </p>

<p><strong>作者簡介</strong><br>
Voke Bernard 是一位充滿熱情、積極進(jìn)取的 M.E.R.N 開發(fā)人員，專門建立動態(tài) React.js 和 Express.js 應(yīng)用程式。他總是尋求在新項(xiàng)目上進(jìn)行合作。如果您有興趣與他合作，請隨時聯(lián)繫。 </p>


          </div>

            
        </div>
</div>

以上是在 React 中使用 MiniSearch：進(jìn)階搜尋和過濾變得簡單的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！