第一章
什麼是 MiniSearch 以及它如何增強 JavaScript 過濾？
MiniSearch 是一個輕量級 JavaScript 函式庫，用於在中小型資料集中進行全文搜尋。它對資料進行索引並允許高級搜尋功能，例如模糊匹配、前綴搜尋、按相關性排名和欄位加權。
透過模糊匹配，模糊匹配意味著找到單字或單字的一部分，即使它們輸入得不完全正確。例如，如果您輸入“wlf”而不是“wolf”，模糊搜尋仍會找到包含“wolf”的結果。
透過前綴搜索，前綴搜尋會查找某事物開頭的單字或部分。因此，如果您搜尋“汽車”，前綴搜尋也會找到“購物車”或“碳酸飲料”。
miniSearch 為我們提供的這些功能可以幫助我們找到我們正在尋找的內容，即使它的輸入不完美。因此，使搜尋結果更加準確和有用。
我們為什麼需要它？
它帶給我們的第一個優點是進階搜尋功能：
傳統過濾通常匹配精確值或基本模式。 MiniSearch 提供更複雜的文字比對。這些進階搜尋功能可以猜測您的錯誤，例如如果您輸入“bak”而不是“back”，MiniSearch 就會知道您的意思。
與傳統過濾/搜尋相比，它的另一個優勢是相關性排名：
MiniSearch 會根據相關性對結果進行排名，從而改善搜尋密集型應用程式中的使用者體驗。這可確保最相關的結果會先出現。例如，如果您搜尋“JavaScript”，系統會優先考慮突出或頻繁提及“JavaScript”的文件或項目，從而改善整體搜尋體驗。
現在我們已經解決了這個問題，讓我們建立一個基本的 React.js 應用程序，看看如何在客戶端使用 MiniSearch。
第二章
如何使用 MiniSearch 設定 React 應用程式：
好的，讓我們來設定我們的項目。為了我們建立這個項目，我將使用永遠可靠的 vite。我將使用的文字編輯器或 IDE 是壞傢伙，Visual Studio 程式碼編輯器。
我將在終端機中按照這些提示設定 Vite。我必須說，我之前已經創建了這些資料夾：
進入 Visual_testing 資料夾：
PS C:\Users\vawkei\Documents> cd .\visual_testing\
進入building-in-public-slack資料夾：
PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\
進入迷你搜尋資料夾：
PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\
進入前端資料夾：
PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\
然後在前端資料夾中，我將安裝 Vite，因為這就是我們想要的位置，在我們的前端資料夾中。
我將用這行程式碼安裝它：
PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .
然後它給了我選擇的選項，我將在這裡選擇 Javascript 和 React。 React 作為框架，Javascript 作為變體。
完成後。迎接我的將是這些：
PS C:\Users\vawkei\Documents> cd .\visual_testing\
然後我將安裝 minisearch 套件和react-router-dom 套件。雖然我在本教學中不需要react-router套件：
PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\
也將透過執行以下程式碼安裝 scss：
PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\
現在，這不會有後端。相反，我會將資料放置在外部的某個地方。稍後會詳細介紹。
因此，如果我們現在透過在終端機中執行 npm run dev 來啟動我們的小型應用程序，我們將在終端中得到以下回應：
PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\
我們必須點擊連結（按住Ctrl鍵點擊）：
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 標誌和 vite 標誌的原因。但是，我們不想使用 App.jsx 的當前內容，因此我們必須清理它。清理後，內容應如下圖所示：
PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install sass
這將使我們的瀏覽器中出現空白畫面。
第四章
準備專案：建立模擬資料庫：
通常情況下，我應該從資料庫、superbase、firebase 等取得資料。或甚至是某個地方的 API。我將從 json 檔案獲取資料。我將其命名為 db.json。該檔案將位於一個名為 data 的資料夾中，該資料夾應該位於我們應用程式的根目錄下。 db 檔案的內容如下所示：
VITE v5.4.11 ready in 332 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help
是的！你家的男友是個遊戲玩家。 ？ ？ ？只是想讓你知道我非常想玩這些遊戲。
現在，讓我快速瀏覽一下該文件。
該檔案包含一個帶有部落格條目數組的 JSON 物件。每個物件代表一個視頻遊戲並具有以下字段：
標題：電玩的名稱。
文字：遊戲的簡要說明。
作者：撰寫部落格文章的人。
id: 每篇部落格的唯一識別碼。例如：「1」、「2」、「3」
第五章
使用 JSON 伺服器設定模擬後端：
要啟動並運行資料庫，我們必須進入終端。我們可以在終端機中打開另一個端口，並在終端機中運行以下命令：
http://localhost:5173/
我們得到的回覆是這樣的：
http://localhost:5173/
這表示我們的模擬伺服器/資料庫已準備好進行操作。
第六章
建構前端：建立 BlogList 元件：
好吧！現在我將進入 src 資料夾並在其中建立組件資料夾。在元件資料夾中，我將建立另一個資料夾，將其命名為 blog。在 blog 資料夾中，我將建立另一個名為 blog-list 的資料夾。在這個部落格清單資料夾中，我將建立兩個檔案。 BlogList.jsx 和 BlogList.module.scss。這裡不會涉及後者。
然後像這樣設定 BlogList 元件：
PS C:\Users\vawkei\Documents> cd .\visual_testing\
第七章
React 中的路由：在 App.jsx 中渲染 BlogList：
現在我們已經建立了 BlogList 的基本結構，我們必須將其連接到 App.jsx，以便它可以在螢幕/瀏覽器上呈現。為此，我們深入研究 App.jsx 文件，並編寫以下程式碼：
PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\
沒有涉及佈局，因為它在這裡沒有用。
然後在 main.jsx 中，我們將在那裡設定瀏覽器路由器，如下所示：
PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\
完成所有這些後，App.jsx 中發生的任何事情現在都可以在我們的瀏覽器/螢幕中看到。
第八章
回傳BlogList.jsx：
在 BlogList.jsx 中設定部落格和載入狀態
在這裡，我將創建一些要使用的狀態，並且還將從在 localhost:8000 上運行的本地伺服器獲取部落格資料。
我要建立的第一個狀態是部落格。當應用程式渲染時，它將作為一個空數組開始，稍後當我們從模擬伺服器收到部落格資料時，它將被更新。
然後我將建立的第二個狀態將用於載入。它將追蹤數據是否仍在加載。它以 false 開頭，可以在獲取資料時設為 true。
嗚嗚嗚嗚：
PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\
第九章
顯示我們所取得的資料：
建構 Jsx：
首先，我將建立 jsx 元件。為此，我將在返回部分寫下以下內容：
PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .
第十章
顯示我們所取得的資料：
useEffect來了：
這沒有多大作用。即使我們在控制台中獲取數據，它也不會顯示在螢幕上。為了讓它顯示在螢幕上，我們需要 React 的壞蛋之一 useEffect 的幫助。
什麼是useEffect？
根據NetNinja 的說法，「這個鉤子在元件的每次渲染時運行函數。請記住，元件在首次載入時最初渲染，並且在狀態變更時也會發生。它會重新渲染DOM，因此可以更新瀏覽器中的狀態（更改後的狀態）」。
嗚嗚嗚嗚
我們之前寫的 fetchBlogs 函數，我們將它放在 useEffect 中：
PS C:\Users\vawkei\Documents> cd .\visual_testing\
看起來像電影《全面啟動》嗎？ 冷靜點，我很快就會解釋。不是電影《預兆》，而是喔！男人們！這是Mern {M.E.R.N}的克里斯多福諾蘭就在這裡。 ???
然後在 Jsx 中，我們將在那裡進行編碼：
PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\
第十二章
MiniSearch 的效果如何：
好的，現在我們可以在螢幕上渲染部落格了。現在讓我們使用 MiniSearch。整個程式碼將如下所示：
PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\
此程式碼建立 MiniSearch 的新實例以啟用全文搜尋。它的作用如下：
fields: 指定資料中的哪些欄位（標題、作者、文字）將被索引以供搜尋。
storeFields: 定義搜尋結果中將包含哪些欄位。這些欄位與索引資料一起存儲，以便於檢索。
然後這個：
PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\
此程式碼為我們提供了頁面呈現後已被 miniSearch 索引的文件總數。
現在，讓我們更進一步。頁面呈現，並且當它呈現時，部落格狀態最初為空。我們可以在程式碼中看到這一點：
PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .
之後，我們使用 fetchBlogs 函數取得資料。那裡確實有數據，我們透過尋找以下程式碼就知道有數據：
Done. Now run: npm install npm run dev
現在這個程式碼：
PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install minisearch react-router-dom
這用於刪除所有先前索引的項目。如果您需要重新索引新資料或清除目前搜尋索引，這非常有用。我們想要重新開始，所以我們使用它。
然後這個：
PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install sass
miniSearch.addAll(data) 方法將 data 陣列中的所有項目加入 MiniSearch 索引。
取得資料後，我們透過執行以下程式碼來更新部落格：
VITE v5.4.11 ready in 332 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help
一旦我們更新了部落格狀態，空的部落格陣列就會被我們的資料填滿。
在這個過程中，我們清理了 miniSearch 實例，為使用以下程式碼建立索引的新資料提供了空間：
http://localhost:5173/
我們透過執行以下程式碼將接收的資料加入其中：
http://localhost:5173/
發生了所有這些，我們的 miniSearch 實例應該載入數據，是的。如果你查看這行程式碼：
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;
它顯示那裡有資料索引。但是，重新渲染頁面後，我們會遺失數據，因為 miniSearch 會重置。我們透過以下程式碼知道這一點：
function App() {
return <> </>;
}
export default App;
看下面，這是我們的 console.log 在渲染時執行程式碼時的實際內容。
{
"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."
}
]
}
第十四章
解：持續使用 useRef 進行 MiniSearch：
為了防止 miniSearch 在每次渲染時重置，我們將其移至 useRef ，以便相同的實例在渲染之間保持不變。方法如下：
PS C:\Users\vawkei\Documents> cd .\visual_testing\
此程式碼區塊可確保使用 useRef 跨渲染保留 MiniSearch 的單一實例。 miniSearchRef 建立並儲存 MiniSearch 實例。
有了這個useRef程式碼，我們就可以安心了。
解釋handleSearch函數：
PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\
handleSearch 函數接收使用者輸入的任何內容，並使用使用者的輸入更新狀態查詢。 （事件.目標.值）。如果輸入為空，則清除結果狀態並停止進一步處理。然後它使用 miniSearch 來搜尋模糊匹配的索引資料（允許輕微的不匹配）。然後它會更新結果的狀態。
第十五章
最終程式碼：
所以我們在 BlogList 中的最終程式碼將如下所示：
從「react」匯入 { useEffect, useRef, useState };
從“./BlogList.module.scss”導入類別；
從“minisearch”導入 MiniSearch；
const BlogList = () =>; {
//建立部落格和isLoading狀態。
const [博客，setBlogs] = useState([]);
const [isLoading, setIsLoading] = useState(false);
//建立查詢和結果狀態。
const [查詢，setQuery] = useState("");
const [結果，setResults] = useState([]);
// 檢查部落格狀態是否已滿
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 回應 = 等待 fetch("http://localhost:8000/blogs");
如果（！response.ok）{
拋出新的錯誤（）；
}
const data = 等待response.json();
控制台.log(資料);
miniSearch.removeAll();
miniSearch.addAll(資料);
console.log("索引部落格：", miniSearch.documentCount);
設定部落格（數據）；
} 捕獲（錯誤）{
常量訊息 =
錯誤實例錯誤？ error.message : "出了點問題";
控制台.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("搜尋結果:", 搜尋結果);
設定結果（搜尋結果）；
};
// 有條件地顯示或搜尋結果或博客
const displayPosts = results.length > > 0 ?結果：部落格；
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>
現在，如果我輸入 Wolfenst，將顯示以下內容：</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173282557470183.jpg" alt="Using MiniSearch in React: Advanced Search and Filtering Made Easy"></p>
<p>你可以看到它甚至沒有等我完全拼寫出來就將其過濾掉。 </p>
<p><em>讓我們試試看批判性地輸入：</em></p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173282557528617.jpg" alt="Using MiniSearch in React: Advanced Search and Filtering Made Easy"><br>
Critical 不是標題的名稱，但它會搜尋我們的文字並找出其中包含 Critical 一詞的所有內容。可以肯定地說，《生化奇兵》是唯一具有批判性的內容。 </p>
<p><strong>最後的想法</strong><br>
感謝您在 MiniSearch 之旅中陪伴我！我真的很感謝您的時間和耐心，我希望本指南有助於導航和理解如何將 MiniSearch 有效地整合到您的 Reactjs 專案中。 </p>
<p><strong>作者簡介</strong><br>
Voke Bernard 是一位充滿熱情、積極進取的 M.E.R.N 開發人員，專門建立動態 React.js 和 Express.js 應用程式。他總是尋求在新項目上進行合作。如果您有興趣與他合作，請隨時聯繫。 </p>
</div>
</div>
</div>以上是在 React 中使用 MiniSearch：進階搜尋和過濾變得簡單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
