什么是 Fuse.js？

Fuse.js 是一個(gè)輕量級的 JavaScript 模糊搜索庫。它允許你在一組數(shù)據(jù)（如數(shù)組中的對象）中進(jìn)行靈活的搜索，即使搜索詞與目標(biāo)數(shù)據(jù)不完全匹配，也能找到相關(guān)的結(jié)果。這在構(gòu)建具有搜索功能的應(yīng)用程序（如網(wǎng)站的搜索欄、應(yīng)用內(nèi)的數(shù)據(jù)搜索等）時(shí)非常有用。

基本用法

安裝：

你可以通過 npm 安裝 Fuse.js。在你的項(xiàng)目目錄下，在終端中運(yùn)行命令來安裝。如果是在瀏覽器環(huán)境中使用，也可以直接從 CDN 引入腳本文件，例如<script src="https://unpkg.com/fuse - js@6.4.6/dist/fuse.min.js"></script>（這里的版本號可能需要根據(jù)實(shí)際情況更新）。

npm install fuse.js
yarn add fuse.js

//ES6模塊語法：
import Fuse from 'fuse.js'

//CommonJS：
const Fuse = require('fuse.js')

創(chuàng)建 Fuse 實(shí)例：

首先，需要準(zhǔn)備好要進(jìn)行搜索的數(shù)據(jù)。假設(shè)你有一個(gè)數(shù)組list，里面包含一些對象，每個(gè)對象有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)建一個(gè) Fuse 實(shí)例。你需要傳入數(shù)據(jù)和一個(gè)配置對象。配置對象可以設(shè)置搜索的各種參數(shù)，如搜索的鍵（keys）、匹配程度（threshold）等。例如：

       const fuse = new Fuse(list, {
         keys: ["name", "description"]
       });

在這個(gè)例子中，keys屬性指定了要在name和description這兩個(gè)屬性中進(jìn)行搜索。

進(jìn)行搜索：

使用search方法來執(zhí)行搜索。例如，如果你想搜索包含 “fruit” 這個(gè)詞的項(xiàng)目，可以這樣做：

       const results = fuse.search("fruit");
       console.log(results);

results將會(huì)是一個(gè)包含匹配結(jié)果的數(shù)組。每個(gè)結(jié)果對象包含一些信息，如item（匹配的原始數(shù)據(jù)項(xiàng)）、refIndex（在原始數(shù)據(jù)中的索引）和score（匹配程度的分?jǐn)?shù)）。

配置選項(xiàng)詳解

keys：

如前面例子所示，keys是一個(gè)數(shù)組，用于指定在數(shù)據(jù)對象的哪些屬性中進(jìn)行搜索。你可以根據(jù)實(shí)際數(shù)據(jù)結(jié)構(gòu)靈活設(shè)置。例如，如果你的數(shù)據(jù)對象還有category屬性，并且也想對其進(jìn)行搜索，可以將category添加到keys數(shù)組中。

threshold：

這個(gè)參數(shù)用于設(shè)置匹配的閾值，范圍是 0 到 1。默認(rèn)值是 0.6。閾值越低，匹配的要求就越寬松。例如，設(shè)置threshold: 0.3會(huì)使搜索結(jié)果包含更多相關(guān)性稍弱的項(xiàng)目。

ignoreLocation：

這是一個(gè)布爾值，默認(rèn)是false。當(dāng)設(shè)置為true時(shí)，搜索時(shí)不考慮關(guān)鍵詞在文本中的位置，這在某些情況下可能會(huì)增加搜索的靈活性。

高級用法

自定義匹配算法：

Fuse.js 允許你自定義匹配算法。你可以通過實(shí)現(xiàn)一個(gè)自定義的matcher函數(shù)來達(dá)到這個(gè)目的。這個(gè)函數(shù)接受兩個(gè)參數(shù)：text（要搜索的文本）和term（搜索詞），并返回一個(gè)匹配程度的分?jǐn)?shù)。例如：

       const customMatcher = (text, term) => {
         // 自定義的匹配邏輯
         // 這里只是一個(gè)簡單示例，返回一個(gè)固定分?jǐn)?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 實(shí)例并進(jìn)行搜索。例如，使用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 的一些高級用法：

自定義權(quán)重：

你可以為不同的搜索鍵設(shè)置不同的權(quán)重，以便某些鍵的匹配對最終結(jié)果的得分產(chǎn)生更大的影響。例如，在一個(gè)包含title和content的文檔列表中，你可能希望title的匹配權(quán)重更高，因?yàn)闃?biāo)題通常更重要。

    const options = {
        keys: [
            { name: 'title', weight: 0.7 },
            { name: 'content', weight: 0.3 }
        ]
    };
    const fuse = new Fuse(list, options);

• 在這個(gè)例子中，當(dāng)搜索時(shí)，title上的匹配將比content上的匹配對最終的匹配得分貢獻(xiàn)更大。這意味著如果在title和content中都有匹配，在title中的匹配將更能影響最終結(jié)果的排名。

使用過濾器：

除了搜索鍵之外，你可以添加過濾器來進(jìn)一步篩選結(jié)果。假設(shè)你有一個(gè)包含文章的列表，并且這些文章有一個(gè)category屬性，你可以添加一個(gè)過濾器只返回屬于特定類別文章的搜索結(jié)果。

    const options = {
        keys: ['title', 'content'],
        filter: (item) => item.category === 'technology'
    };
    const fuse = new Fuse(list, options);

• 這樣，搜索結(jié)果將僅包含屬于technology類別的文章。

模糊匹配選項(xiàng)：

Fuse.js 允許你調(diào)整模糊匹配的具體設(shè)置，包括距離和字符匹配。例如，你可以調(diào)整模糊匹配的最大編輯距離（允許多少字符的差異）和字符匹配的規(guī)則。

    const options = {
        keys: ['title', 'content'],
        distance: 100,  // 最大編輯距離
        includeMatches: true,  // 包含匹配的詳細(xì)信息
        findAllMatches: true,  // 找到所有可能的匹配
        minMatchCharLength: 3  // 匹配字符的最小長度
    };
    const fuse = new Fuse(list, options);

• distance：允許的最大編輯距離，值越大，匹配越寬松。
• includeMatches：如果設(shè)置為true，每個(gè)搜索結(jié)果將包含一個(gè)matches屬性，顯示匹配的具體位置和長度。
• findAllMatches：設(shè)置為true時(shí)，會(huì)找到所有可能的匹配而不是僅第一個(gè)。
• minMatchCharLength：設(shè)置匹配的最小字符長度，低于此長度的搜索詞將不進(jìn)行匹配。

自定義排序函數(shù)：

你可以使用自定義排序函數(shù)對搜索結(jié)果進(jìn)行排序，而不是依賴于默認(rèn)的得分排序。

    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);

• 這個(gè)例子根據(jù)每個(gè)項(xiàng)目的date屬性進(jìn)行降序排序。你可以根據(jù)不同的屬性或自定義邏輯調(diào)整排序函數(shù)。

搜索結(jié)果的分頁：

對于大量的搜索結(jié)果，你可能需要分頁顯示。可以使用search方法的limit和offset參數(shù)來實(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：每頁顯示的結(jié)果數(shù)量。
• offset：起始結(jié)果的偏移量，可用于顯示不同的頁面。

使用自定義匹配函數(shù)：

除了使用內(nèi)置的匹配函數(shù)，你可以實(shí)現(xiàn)一個(gè)完全自定義的匹配函數(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,  // 是否排序結(jié)果
        tokenSeparator: /\s+/  // 分詞分隔符
    };
    const fuse = new Fuse(list, options);

• getFn：自定義獲取屬性值的函數(shù)，允許你對屬性值進(jìn)行預(yù)處理。
• matchAllTokens：如果為true，要求搜索詞的所有部分都必須匹配。
• shouldSort：如果為false，不進(jìn)行排序。
• tokenSeparator：用于分詞的分隔符，默認(rèn)是空格。

參考文檔地址fusejs文檔

總結(jié)

到此這篇關(guān)于強(qiáng)大、輕巧、零依賴的模糊搜索庫Fuse.js用法的文章就介紹到這了,更多相關(guān)模糊搜索庫Fuse.js用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論