大家好,我是前端实验室的大师兄！

不知道大家在项目里有没有实现过搜索功能？

最近大师兄负责的一个项目就用到了数据搜索功能，而且需要模糊查询，为此大师兄接触到了一个牛逼的搜索库——Fuse

首先来给大家介绍一下什么是模糊搜索：模糊搜索顾名思义，就是输入的字段不完整，也能查出来你想要的大概结果

模糊搜索又称为近似字符串匹配,是一种查找与给定模式 近似相等的字符串的技术。

Fuse.js

Fuse.js 是一个功能强大、轻量级的模糊搜索库，零依赖。而且使用它不需搞懂复杂的模糊搜索算法

Fuse.js无需设置专门的后端来处理搜索。上手非常简单，并且性能强大

特点

• 简单代码，实现模糊搜索、处理搜索，不需要后端开发技术
• 数据量大的情况下表现优秀，性能很好
• 无 DOM 依赖，既可以在前端使用，也支持在 node.js 后端使用
• 强大的搜索支持：不仅支持搜索字符串数组、对象数组，支持嵌套搜索、加权搜索等

使用

安装

npm install --save fuse.js

也可以直接使用<script>引入

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

使用

// 搜索数据
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 myIndex = Fuse.createIndex(options.keys, books)
// 初始化Fuse和索引
const fuse = new Fuse(books, options, myIndex)

// 传入搜索关键词，返回搜索结果
const pattern = "clolny"
return fuse.search(pattern)

Fuse.js 官网提供了大量的代码例子和 demo 来演示效果，并且配置的有详细的API文档

官网：https://fusejs.io/

github链接: https://github.com/krisk/fuse

关注【前端实验室】公众号回复： bbbb223

即可免费获取拉勾教育价值17999元的全套前端教程