FlexSearch怎麼用 前端瀏覽器搜尋引擎教程

FlexSearch是一個前端JavaScript搜尋引擎，在瀏覽器裡就能跑，不用伺服器，適合做靜態網站的即時搜尋。它會先把文章等內容整理進索引，訪客輸入關鍵詞時再快速查詢。下面用一個小型文章列表演示基本流程；實際專案中，索引資料通常由靜態頁面或JSON檔案提供，搜尋結果再由頁面程式碼展示。

第一步：安裝FlexSearch

先在專案目錄開啟終端，執行npm install flexsearch。如果專案使用ES模組，可以在JavaScript檔案裡寫import { Index } from “flexsearch”；若只是做靜態頁面，也可以按專案構建方式引入瀏覽器可用的FlexSearch指令碼。安裝後啟動專案，確認控制檯沒有模組載入錯誤，再開始建立索引。

還沒用構建工具的話，可先建立一個簡單的HTML頁面和JS檔案，把搜尋框、結果區域放在頁面中，再讓指令碼負責載入索引和響應輸入。注意，使用npm安裝時，瀏覽器通常需要透過Vite等開發伺服器執行專案；直接雙擊HTML檔案可能無法正確載入模組。

第二步：建立索引和新增文件

在JS檔案中匯入Index，然後建立索引物件。每篇文章準備一個穩定且唯一的ID，並把標題、摘要等可搜尋文字整理成字串。逐條呼叫index.add(id, text)加入索引；文章數量多時，可以從JSON檔案讀取資料後遍歷新增。索引建好後，記得同時保留ID與原始文章的對應關係。

例如，準備兩篇文章時，可以使用const docs = [{ id: 1, title: “靜態網站搜尋”, text: “在瀏覽器中實現即時搜尋” }]這樣的資料結構。遍歷陣列，把每條記錄的標題和正文拼成待索引文字，再傳入對應ID。新增或修改文章後，也要重新生成索引，避免搜尋結果仍顯示舊內容。

配置索引和分詞

建立索引時可以傳入配置，例如new Index({ tokenize: “forward” })。分詞方式會影響匹配規則、速度和記憶體佔用：forward可支援從詞首開始的部分匹配；strict更偏向完整詞匹配。先用預設設定或簡單配置跑通流程，再根據測試結果調整。不同FlexSearch版本的配置項可能有差異，使用前應核對所安裝版本的API文件。

中文搜尋要特別留意分詞：中文詞語之間通常沒有空格，簡單按空格拆分可能不理想。可先用少量真實文章測試常見查詢，再考慮配置適合中文的編碼或自定義分詞邏輯。切勿把整段文字不加處理地當作一個詞；否則短詞查詢可能匹配不到，索引也可能變得不夠實用。

第三步：執行搜尋並展示結果

使用者輸入關鍵詞後，呼叫index.search(query)取得匹配ID，再用這些ID從文章資料中找到標題、連結和摘要。把結果渲染到頁面的結果容器裡；沒有匹配項時顯示友好的提示。監聽搜尋框的input事件，就能做到邊輸入邊更新。查詢為空時可清空結果，避免頁面繼續顯示上一次的搜尋內容。

展示時要留意安全：不要把使用者輸入或文章文字直接拼進未經處理的HTML。可以建立DOM節點並透過textContent設定標題和摘要，再用安全方式設定連結。若文章很多，可增加結果數量上限或延遲輸入處理，減少頻繁查詢帶來的負擔；上線前也要測試鍵盤操作和移動端顯示。

排查問題時，先確認索引確實新增了文件，再檢查查詢詞和文件文字是否符合當前分詞規則。靜態網站可以在構建時生成文章JSON，頁面載入後再建立索引；這樣無需每次搜尋都請求伺服器，但索引檔案會增加下載體積。國內想嘗試不同的建站或應用開發方案，也可以瞭解碼上飛，官網地址：codeflying.cgref.cn。此外，釋出前可在“潤滅”相關頁面實際測試中文關鍵詞、空查詢和無結果時的顯示效果。