強大、輕巧、零依賴的模糊搜索庫Fuse.js用法實例
什么是 Fuse.js？
Fuse.js 是一個輕量級的 JavaScript 模糊搜索庫。它允許你在一組數(shù)據(jù)（如數(shù)組中的對象）中進行靈活的搜索，即使搜索詞與目標數(shù)據(jù)不完全匹配，也能找到相關的結果。這在構建具有搜索功能的應用程序（如網(wǎng)站的搜索欄、應用內的數(shù)據(jù)搜索等）時非常有用。
基本用法
安裝：
你可以通過 npm 安裝 Fuse.js。在你的項目目錄下，在終端中運行命令來安裝。如果是在瀏覽器環(huán)境中使用，也可以直接從 CDN 引入腳本文件，例如<script src="https://unpkg.com/fuse - js@6.4.6/dist/fuse.min.js"></script>（這里的版本號可能需要根據(jù)實際情況更新）。
npm install fuse.js yarn add fuse.js
//ES6模塊語法：
import Fuse from 'fuse.js'
//CommonJS：
const Fuse = require('fuse.js')創(chuàng)建 Fuse 實例：
首先，需要準備好要進行搜索的數(shù)據(jù)。假設你有一個數(shù)組list，里面包含一些對象，每個對象有name和description屬性。例如：
const list = [
{
name: "Apple",
description: "A round and sweet fruit"
},
{
name: "Banana",
description: "A long and curved fruit"
},
{
name: "Cherry",
description: "A small and red fruit"
}
];
然后，創(chuàng)建一個 Fuse 實例。你需要傳入數(shù)據(jù)和一個配置對象。配置對象可以設置搜索的各種參數(shù)，如搜索的鍵（keys）、匹配程度（threshold）等。例如：
const fuse = new Fuse(list, {
keys: ["name", "description"]
});
在這個例子中，keys屬性指定了要在name和description這兩個屬性中進行搜索。
進行搜索：
使用search方法來執(zhí)行搜索。例如，如果你想搜索包含 “fruit” 這個詞的項目，可以這樣做：
const results = fuse.search("fruit");
console.log(results);
results將會是一個包含匹配結果的數(shù)組。每個結果對象包含一些信息，如item（匹配的原始數(shù)據(jù)項）、refIndex（在原始數(shù)據(jù)中的索引）和score（匹配程度的分數(shù)）。
配置選項詳解
keys：
如前面例子所示，keys是一個數(shù)組，用于指定在數(shù)據(jù)對象的哪些屬性中進行搜索。你可以根據(jù)實際數(shù)據(jù)結構靈活設置。例如，如果你的數(shù)據(jù)對象還有category屬性，并且也想對其進行搜索，可以將category添加到keys數(shù)組中。
threshold：
這個參數(shù)用于設置匹配的閾值，范圍是 0 到 1。默認值是 0.6。閾值越低，匹配的要求就越寬松。例如，設置threshold: 0.3會使搜索結果包含更多相關性稍弱的項目。
ignoreLocation：
這是一個布爾值，默認是false。當設置為true時，搜索時不考慮關鍵詞在文本中的位置，這在某些情況下可能會增加搜索的靈活性。
高級用法
自定義匹配算法：
Fuse.js 允許你自定義匹配算法。你可以通過實現(xiàn)一個自定義的matcher函數(shù)來達到這個目的。這個函數(shù)接受兩個參數(shù)：text（要搜索的文本）和term（搜索詞），并返回一個匹配程度的分數(shù)。例如：
const customMatcher = (text, term) => {
// 自定義的匹配邏輯
// 這里只是一個簡單示例，返回一個固定分數(shù)
return 0.5;
};
const fuse = new Fuse(list, {
keys: ["name", "description"],
matcher: customMatcher
});
處理異步數(shù)據(jù)：
如果你的數(shù)據(jù)是通過異步請求獲取的（如從 API 獲取數(shù)據(jù)），你需要先等待數(shù)據(jù)加載完成，然后再創(chuàng)建 Fuse 實例并進行搜索。例如，使用async/await語法：
async function searchAsyncData() {
const response = await fetch('your - api - url');
const data = await response.json();
const fuse = new Fuse(data, {
keys: ["name", "description"]
});
const results = fuse.search("your - search - term");
console.log(results);
}
searchAsyncData();以下是 Fuse.js 的一些高級用法：
自定義權重：
你可以為不同的搜索鍵設置不同的權重，以便某些鍵的匹配對最終結果的得分產(chǎn)生更大的影響。例如，在一個包含title和content的文檔列表中，你可能希望title的匹配權重更高，因為標題通常更重要。
const options = {
keys: [
{ name: 'title', weight: 0.7 },
{ name: 'content', weight: 0.3 }
]
};
const fuse = new Fuse(list, options);
- 在這個例子中，當搜索時，
title上的匹配將比content上的匹配對最終的匹配得分貢獻更大。這意味著如果在title和content中都有匹配，在title中的匹配將更能影響最終結果的排名。
使用過濾器：
除了搜索鍵之外，你可以添加過濾器來進一步篩選結果。假設你有一個包含文章的列表，并且這些文章有一個category屬性，你可以添加一個過濾器只返回屬于特定類別文章的搜索結果。
const options = {
keys: ['title', 'content'],
filter: (item) => item.category === 'technology'
};
const fuse = new Fuse(list, options);
- 這樣，搜索結果將僅包含屬于
technology類別的文章。
模糊匹配選項：
Fuse.js 允許你調整模糊匹配的具體設置，包括距離和字符匹配。例如，你可以調整模糊匹配的最大編輯距離（允許多少字符的差異）和字符匹配的規(guī)則。
const options = {
keys: ['title', 'content'],
distance: 100, // 最大編輯距離
includeMatches: true, // 包含匹配的詳細信息
findAllMatches: true, // 找到所有可能的匹配
minMatchCharLength: 3 // 匹配字符的最小長度
};
const fuse = new Fuse(list, options);
distance：允許的最大編輯距離，值越大，匹配越寬松。includeMatches：如果設置為true，每個搜索結果將包含一個matches屬性，顯示匹配的具體位置和長度。findAllMatches：設置為true時，會找到所有可能的匹配而不是僅第一個。minMatchCharLength：設置匹配的最小字符長度，低于此長度的搜索詞將不進行匹配。
自定義排序函數(shù)：
你可以使用自定義排序函數(shù)對搜索結果進行排序，而不是依賴于默認的得分排序。
const options = {
keys: ['title', 'content'],
sortFn: (a, b) => {
if (a.item.date > b.item.date) {
return -1;
} else if (a.item.date < b.item.date) {
return 1;
}
return 0;
}
};
const fuse = new Fuse(list, options);
- 這個例子根據(jù)每個項目的
date屬性進行降序排序。你可以根據(jù)不同的屬性或自定義邏輯調整排序函數(shù)。
搜索結果的分頁：
對于大量的搜索結果，你可能需要分頁顯示?？梢允褂?code>search方法的limit和offset參數(shù)來實現(xiàn)。
const options = {
keys: ['title', 'content']
};
const fuse = new Fuse(list, options);
const results = fuse.search('search term', { limit: 10, offset: 20 });
limit：每頁顯示的結果數(shù)量。offset：起始結果的偏移量，可用于顯示不同的頁面。
使用自定義匹配函數(shù)：
除了使用內置的匹配函數(shù)，你可以實現(xiàn)一個完全自定義的匹配函數(shù)。
const options = {
keys: ['title', 'content'],
getFn: (obj, path) => {
// 自定義的獲取屬性值的函數(shù)
if (path === 'customKey') {
return obj.customKey.toUpperCase();
}
return Fuse.config.getFn(obj, path);
},
matchAllTokens: false, // 是否匹配所有搜索詞
shouldSort: false, // 是否排序結果
tokenSeparator: /\s+/ // 分詞分隔符
};
const fuse = new Fuse(list, options);
getFn：自定義獲取屬性值的函數(shù)，允許你對屬性值進行預處理。matchAllTokens：如果為true，要求搜索詞的所有部分都必須匹配。shouldSort：如果為false，不進行排序。tokenSeparator：用于分詞的分隔符，默認是空格。
參考文檔地址fusejs文檔
總結
到此這篇關于強大、輕巧、零依賴的模糊搜索庫Fuse.js用法的文章就介紹到這了,更多相關模糊搜索庫Fuse.js用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JavaScript實現(xiàn)審核流程狀態(tài)的動態(tài)顯示進度條
對于有很多流程的東西，我們希望能夠根據(jù)不同的階段，用流程條對應地進行顯示，非常直觀，給用戶帶來極好的用戶體驗，下面小編給大家分享JavaScript實現(xiàn)審核流程狀態(tài)的動態(tài)顯示進度條功能，需要的的朋友參考下2017-03-03
所謂解構就是解構聚合數(shù)據(jù),下面這篇文章主要給大家介紹了關于ES6新語法之解構的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Bootstrap Table服務器分頁與在線編輯應用總結 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了bootstrap table小案例，教大家如何使用表格組件bootstrap table2016-10-10
浮動廣告是目前網(wǎng)站很常見的一種廣告形式,浮動廣告能實時跟隨用戶的瀏覽,有效的傳達產(chǎn)品要表達的意思,達到很好的傳播效果。本文使用JavaScript實現(xiàn)跟隨廣告的示例代碼，感興趣的可以了解一下2021-11-11
使用js實現(xiàn)按鈕的滑動效果，通過更改按鈕的顯示樣式，來實現(xiàn)按鈕動態(tài)滑動,需要的朋友可以參考下2014-04-04
JavaScript實現(xiàn)鼠標滾輪控制頁面圖片切換功能示例
這篇文章主要介紹了JavaScript實現(xiàn)鼠標滾輪控制頁面圖片切換功能,涉及javascript事件響應及頁面元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-10-10
微信小程序picker表單選擇器的使用,根據(jù)官方介紹的有點不清楚,下面這篇文章主要給大家介紹了關于微信小程序選擇器組件picker的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了js事件循環(huán)機制，并通過實例分析了用法和技巧，一起學習分享下。2017-12-12
這篇文章主要介紹了JS實現(xiàn)可用滑塊滑動的緩動圖代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09