code狂魔

V1

2022/09/24阅读:53主题:萌绿

前端必会的模糊搜索库

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

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

最近大师兄负责的一个项目就用到了数据搜索功能,而且需要模糊查询,为此大师兄接触到了一个牛逼的搜索库——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元的全套前端教程

分类:

前端

标签:

JavaScript

作者介绍

code狂魔
V1