前端无依赖的模糊搜索工具！轻巧，强大！
前端无依赖的模糊搜索工具！轻巧，强大！
大家好，我是前端实验室的大师兄!
前言
这段时间大师兄项目中出现了固定数据池的模糊检索需求，也就是在一大堆几乎不变化的数据中进行模糊检索。同时，这样的检索需求在同模块中也会出现很多次。
目前大部分的模糊搜索是这样的：
①模糊关键字==》②请求后端接口==》③后端返回匹配的内容==》④客户端渲染
由于总数据几乎固定，我们不太可能每次都请求后端进行模糊检索--效率太差。
因此，我们要在客户端实现数据的隔离检索。今天大师兄给大家分享一款可支持前端模糊搜索的工具：Fuse.js
这是一个优秀的搜索工具库，简单几行代码就可以实现模糊搜索，体积小巧无依赖。
关于 Fuse.js
Fuse.js 是一个功能强大、轻量级的模糊搜索库，通过提供简单的 api 调用，达到强大的模糊搜索效果，无需搞懂复杂的模糊搜索算法。
Fuse.js 的技术特点
- 简单代码，实现模糊搜索、处理搜索，甚至不需要后端开发技术
- 索引配置，即使大数据量下仍表现优秀，性能很好
- 强大的搜索支持：不仅支持搜索字符串数组、对象数组，支持嵌套搜索、加权搜索等 接下来，我们就来实际使用下。
安装 Fuse.js
Fuse.js 支持多种方式安装使用，可以直接在 Vue 项目中使用：
// npm 安装
npm install --save fuse.js
// yarn 安装
yarn add fuse.js
如果是在浏览器页面中使用，直接引入即可：
<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>
使用 Fuse.js
一个基础的模糊搜索代码如下：
// 搜索数据
const list = [
{
"title": "Old Man's War",
"author": {
"firstName": "John",
"lastName": "Scalzi"
}
},
{
"title": "The Lock Artist",
"author": {
"firstName": "Steve",
"lastName": "Hamilton"
}
},
....
];
// 搜索配置，可查看官网文档了解参数
const options = {
keys: [
"title",
"author.firstName"
]
};
// 实例化 Fuse
const fuse = new Fuse(list, options);
// 传入搜索关键词，返回搜索结果
const pattern = "clolny"
return fuse.search(pattern)
整个工具非常简单，数据、配置、搜索关键字三个部分即可让项目快速支持了模糊搜索
工具使用和配置不存在什么门槛，亲测发现该工具对中文字符串搜索的支持也很好。
特别推荐：索引
Fuse.js 能提供高效的检索速度，离不开索引。这个是重中之重。这里给大家演示下。
索引要提前创建
索引可以在构建阶段就提前准备好。也可以在其他时机，只要在使用前能获取即可。
// Create the Fuse index
const myIndex = Fuse.createIndex(['title', 'author.firstName'], list)
// Serialize and save it
fs.writeFile('fuse-index.json', JSON.stringify(myIndex.toJSON()))
项目中使用索引
// Load and deserialize index
const fuseIndex = await require('fuse-index.json')
const myIndex = Fuse.parseIndex(fuseIndex)
// initialize Fuse with the index
const fuse = new Fuse(list, options, myIndex)
通过上面的操作。前面list数组的数据就构建好索引了。即使list中数据量很大，检索的速度也是很快的。
体验和建议
Fuse.js官网提供了API详解、配置示例，以及大量的代码例子和 demo 来演示效果。大家赶紧去试试！
Fuse.js地址 https://fusejs.io/
写在最后
欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式：在下方公众号后台，回复111，按提示操作即可进群。
腾讯云开发者
