做了个数据的表格展示，还带有前端搜索功能，你看着浏览器觉得很满意，可不一会儿需求来了，说要改成模糊搜索。你在脑海中构思了好一阵子，暗想又要加班了。不！Fuse.js 来告诉你，前端模糊搜索只需几行代码就能搞定！

简介

Fuse.js，是 krisk 在 Github 上开源的 Javascript 模糊搜索工具，代码仓库在 https://github.com/krisk/Fuse，目前版本为 6.2.0。其功能强大，轻量，且没有额外依赖，同时使用简单，在想要实现前端模糊搜索，或在 Javascript 后端提供简单模糊搜索服务时，Fuse.js 是你的最佳选择。

安装

Fuse.js 没有额外依赖，可以使用 npm 安装

npm install --save fuse.js

或 yarn 安装，

yarn add fuse.js

也可以使用 CDN 在浏览器上使用：

<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.2.0/dist/fuse.min.js"></script>

示例

Fuse.js 使用相关性分数进行模糊搜索，分数决定于：模糊系数分数，关键权重和正规化的域长度。我们来看一些基本的使用例子。

const list = ["Old Man's War", 'The Lock Artist']
const fuse = new Fuse(list)
const result = fuse.search('od man')

首先定义了一个字符串列表作为待选的数据，然后实例化 Fuse，并接收想要搜索的文本执行 search。返回的输出如下：

[
  {
    "item": "Old Man's War",
    "refIndex": 0
  }
]

可以看到，“od man”的输入并不是任何备选数据的子串，但通过 Fuse.js 的模糊搜索，得到了最适合的搜索结果。

Fuse.js 也可以对对象列表进行搜索，支持对于嵌套对象的搜索：

const list = [
  {
    title: "Old Man's War",
    author: {
      name: 'John Scalzi',
      tags: [{ value: 'American' }]
    }
  },
  {
    title: 'The Lock Artist',
    author: {
      name: 'Steve Hamilton',
      tags: [{ value: 'English' }]
    }
  }
]

const options = {
  includeScore: true,
  keys: ['author.tags.value']
}

const fuse = new Fuse(list, options)

const result = fuse.search('engsh')

该代码对于嵌套的 author.tags.value 域进行了模糊搜索。

Fuse.js 选项丰富，包括

• isCaseSensitive：是否大小写敏感；
• includeScore：是否返回匹配分数；
• shouldSort：是否对返回结果进行排序
• ……

可以根据实际使用情况进行设置。

我们还可以对于不同域的权重进行定制。权重默认为1，必须大于0。权重越大，对搜索结果的影响越大。例如，我们可以对文章的标题赋予更高的权重，更符合搜索的需要。

const options = {
  includeScore: true,
  keys: [
    {
      name: 'title',
      weight: 0.8
    },
    {
      name: 'content',
      weight: 0.4
    }
  ]
}

另外，Fuse.js 还提供了扩展的搜索语言，来提供更为丰富的搜索功能，包括

• abc：模糊搜索
• 'abc：精准搜索，需要包括搜索的文本
• !abc：精准反向搜索，需要不包括搜索的文本
• ^abc：前缀搜索，前缀为目标文本
• ……

总结

Fuse.js 使得模糊搜索功能的实现变得简单，在前端搜索中应用广泛。其所支持的功能丰富，能适应许多功能场景。

Fuse.js 十分轻量，没有额外依赖，在前后端皆可使用；接口简洁，使用简单，方便上手，值得使用和学习。