脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 模糊搜索库Fuse.js用法

强大、轻巧、零依赖的模糊搜索库Fuse.js用法实例

 更新时间：2025年08月09日 10:22:52   作者：一行注释  
Fuse.js是一款轻量级的JavaScript模糊搜索库,提供了模糊搜索和搜索排序功能,这篇文章主要介绍了强大、轻巧、零依赖的模糊搜索库Fuse.js用法的相关资料,需要的朋友可以参考下

什么是 Fuse.js？

Fuse.js 是一个轻量级的 JavaScript 模糊搜索库。它允许你在一组数据（如数组中的对象）中进行灵活的搜索，即使搜索词与目标数据不完全匹配，也能找到相关的结果。这在构建具有搜索功能的应用程序（如网站的搜索栏、应用内的数据搜索等）时非常有用。

基本用法

安装：

你可以通过 npm 安装 Fuse.js。在你的项目目录下，在终端中运行命令来安装。如果是在浏览器环境中使用，也可以直接从 CDN 引入脚本文件，例如<script src="https://unpkg.com/fuse - js@6.4.6/dist/fuse.min.js"></script>（这里的版本号可能需要根据实际情况更新）。

npm install fuse.js
yarn add fuse.js
//ES6模块语法：
import Fuse from 'fuse.js'

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

创建 Fuse 实例：

首先，需要准备好要进行搜索的数据。假设你有一个数组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"
         }
       ];

然后，创建一个 Fuse 实例。你需要传入数据和一个配置对象。配置对象可以设置搜索的各种参数，如搜索的键（keys）、匹配程度（threshold）等。例如：

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

在这个例子中，keys属性指定了要在name和description这两个属性中进行搜索。

进行搜索：

使用search方法来执行搜索。例如，如果你想搜索包含 “fruit” 这个词的项目，可以这样做：

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

results将会是一个包含匹配结果的数组。每个结果对象包含一些信息，如item（匹配的原始数据项）、refIndex（在原始数据中的索引）和score（匹配程度的分数）。

配置选项详解

keys：

如前面例子所示，keys是一个数组，用于指定在数据对象的哪些属性中进行搜索。你可以根据实际数据结构灵活设置。例如，如果你的数据对象还有category属性，并且也想对其进行搜索，可以将category添加到keys数组中。

threshold：

这个参数用于设置匹配的阈值，范围是 0 到 1。默认值是 0.6。阈值越低，匹配的要求就越宽松。例如，设置threshold: 0.3会使搜索结果包含更多相关性稍弱的项目。

ignoreLocation：

这是一个布尔值，默认是false。当设置为true时，搜索时不考虑关键词在文本中的位置，这在某些情况下可能会增加搜索的灵活性。

高级用法

自定义匹配算法：

Fuse.js 允许你自定义匹配算法。你可以通过实现一个自定义的matcher函数来达到这个目的。这个函数接受两个参数：text（要搜索的文本）和term（搜索词），并返回一个匹配程度的分数。例如：

       const customMatcher = (text, term) => {
         // 自定义的匹配逻辑
         // 这里只是一个简单示例，返回一个固定分数
         return 0.5;
       };
       const fuse = new Fuse(list, {
         keys: ["name", "description"],
         matcher: customMatcher
       });

处理异步数据：

如果你的数据是通过异步请求获取的（如从 API 获取数据），你需要先等待数据加载完成，然后再创建 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 的一些高级用法：

自定义权重：

你可以为不同的搜索键设置不同的权重，以便某些键的匹配对最终结果的得分产生更大的影响。例如，在一个包含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 允许你调整模糊匹配的具体设置，包括距离和字符匹配。例如，你可以调整模糊匹配的最大编辑距离（允许多少字符的差异）和字符匹配的规则。

    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：设置匹配的最小字符长度，低于此长度的搜索词将不进行匹配。

自定义排序函数：

你可以使用自定义排序函数对搜索结果进行排序，而不是依赖于默认的得分排序。

    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);
  • 这个例子根据每个项目的date属性进行降序排序。你可以根据不同的属性或自定义逻辑调整排序函数。

搜索结果的分页：

对于大量的搜索结果，你可能需要分页显示。可以使用search方法的limit和offset参数来实现。

    const options = {
        keys: ['title', 'content']
    };
    const fuse = new Fuse(list, options);
    const results = fuse.search('search term', { limit: 10, offset: 20 });
  • limit：每页显示的结果数量。
  • offset：起始结果的偏移量，可用于显示不同的页面。

使用自定义匹配函数：

除了使用内置的匹配函数，你可以实现一个完全自定义的匹配函数。

    const options = {
        keys: ['title', 'content'],
        getFn: (obj, path) => {
            // 自定义的获取属性值的函数
            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：自定义获取属性值的函数，允许你对属性值进行预处理。
  • matchAllTokens：如果为true，要求搜索词的所有部分都必须匹配。
  • shouldSort：如果为false，不进行排序。
  • tokenSeparator：用于分词的分隔符，默认是空格。

参考文档地址fusejs文档

总结

到此这篇关于强大、轻巧、零依赖的模糊搜索库Fuse.js用法的文章就介绍到这了,更多相关模糊搜索库Fuse.js用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论