首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >前端无依赖的模糊搜索工具!轻巧,强大!

前端无依赖的模糊搜索工具!轻巧,强大!

作者头像
程序员老鱼
发布于 2022-12-02 02:58:34
发布于 2022-12-02 02:58:34
1.5K00
代码可运行
举报
文章被收录于专栏:前端实验室前端实验室
运行总次数:0
代码可运行

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

前言

这段时间大师兄项目中出现了固定数据池的模糊检索需求,也就是在一大堆几乎不变化的数据中进行模糊检索。同时,这样的检索需求在同模块中也会出现很多次。

目前大部分的模糊搜索是这样的:

①模糊关键字==》②请求后端接口==》③后端返回匹配的内容==》④客户端渲染

由于总数据几乎固定,我们不太可能每次都请求后端进行模糊检索--效率太差

因此,我们要在客户端实现数据的隔离检索。今天大师兄给大家分享一款可支持前端模糊搜索的工具:Fuse.js

这是一个优秀的搜索工具库,简单几行代码就可以实现模糊搜索,体积小巧无依赖。

关于 Fuse.js

Fuse.js 是一个功能强大、轻量级的模糊搜索库,通过提供简单的 api 调用,达到强大的模糊搜索效果,无需搞懂复杂的模糊搜索算法。

Fuse.js 的技术特点

  • 简单代码,实现模糊搜索、处理搜索,甚至不需要后端开发技术
  • 索引配置,即使大数据量下仍表现优秀,性能很好
  • 强大的搜索支持:不仅支持搜索字符串数组、对象数组,支持嵌套搜索、加权搜索等 接下来,我们就来实际使用下。

安装 Fuse.js

Fuse.js 支持多种方式安装使用,可以直接在 Vue 项目中使用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// npm 安装
npm install --save fuse.js

// yarn 安装
yarn add fuse.js

如果是在浏览器页面中使用,直接引入即可:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>

使用 Fuse.js

一个基础的模糊搜索代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 搜索数据
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 能提供高效的检索速度,离不开索引。这个是重中之重。这里给大家演示下。

索引要提前创建

索引可以在构建阶段就提前准备好。也可以在其他时机,只要在使用前能获取即可。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 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()))
项目中使用索引
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 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,按提示操作即可进群。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-08-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端实验室 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
被尤雨溪/阮一峰等大神推荐的UI组件库
最近大师兄翻到一个VUE3组件库:Varlet。作者是一位专科毕业、来自四川在无锡工作的前端开发者。作为半个老乡,真心为作者点赞。
程序员老鱼
2022/12/02
2.5K0
使用fuse.js模糊搜索 常用配置
fuse.js是一个轻量的模糊搜索库 安装 npm install --save fuse.js 使用 import Fuse from 'fuse.js' const list = [...] // 带搜索的数据 const options = {keys:['name']} // 搜索配置,可以配置多个查找字段 const fuse = new Fuse(list, options); return fuse.search('psr') // 根据模式返回搜索结果,形式如[{item:{匹配的对象},r
路过君
2022/04/26
2.3K0
一款让OCR识别正确率趋近100%的库
Tesseract.js 一个 纯Javascript编程语言的 ocr 识别库,简单实用。
程序员老鱼
2022/12/02
3.6K0
无比强大的图片裁剪工具库!牛X!
最近项目中入手了一个非常实用的插件,这里和大家一起分享下:通过canvas实现图片裁剪的工具--cropper.js
程序员老鱼
2022/12/02
2.2K0
Java学习笔记-全栈-web开发-24-Vue
jq利用DOM操作,降低了ajax请求函数的复用性(js与html耦合性太高)。 而vue通过框架提供的指令实现数据双向绑定,我们只需要关注业务逻辑,而不需要直接操作DOM元素。
devi
2021/08/18
1.3K0
Compass: 在你的应用中集成搜索功能
驱动力 在许多应用程序中,用户总会提出搜索和查询领域实例的需求。他们或者希望构建一个进入应用程序的入口或者希望填充表单的机制。非常典型的解决方案是用浏览的方式(把领域的继承关系表现出来,这样用户可以定位和选择一个自己需要的)或者一个检索表单的方式(展现一个多个输入域的表单,用户可以检索他们需要的信息)。 现实中,对于可用性的角度来说,这两种方案都不是最佳的。浏览的方式会在有许多分支的时候变得缓慢而笨重。而且,用户通常精确地知道他们要用到那个应用,然而却不情愿要浏览整个系统来找到他要的应用。检索表单的方式同样
张善友
2018/01/22
1.4K0
一个基于 Js + Canvas 的【大转盘 & 九宫格 & 老虎机】抽奖库!
大家好,我是前端实验室的小师妹!一名资深的互联网玩家,专注分享大前端领域技术、面试宝典、学习资料等~
程序员老鱼
2022/12/02
3.8K0
让我告诉你一些强无敌的 NPM 软件包
面对繁忙的日程安排与紧迫的工期限制,选择能够切实提升生产率的工具无疑至关重要。
coder_koala
2021/04/21
2K0
每个 JavaScript 程序员都应该掌握这个工具!
大师兄最近对一个工具库的使用上瘾了!这个给大家分享下。这是每个 JavaScript 程序员都应该掌握的工具:Ramda
程序员老鱼
2022/12/22
8170
每个 JavaScript 程序员都应该掌握这个工具!
开箱即用的中台前端解决方案
Ant Design Pro 是基于 Ant Design 和 umi 封装的一整套企业级中后台前端/设计解决方案。
程序员老鱼
2022/12/02
1K0
小巧、零依赖的工具库!
Licia 是一套在开发中实践积累起来的实用 JavaScript 工具库。该库目前拥有超过 400 个模块。
程序员老鱼
2023/05/23
6070
小巧、零依赖的工具库!
Handlebars中文文档(译自官方版)
Handlebars 为你提供了一个可以毫无挫折感的高效率书写 语义化的模板 所必需的一切。
李维亮
2021/07/09
9660
一款轻量级的用户引导插件,是真的强大!
每当我们的新产品上线或大版本迭代后,产品使用步骤或功能介绍是必不可少的。 今天就给大家介绍一款可以快速实现新手引导和交互效果的工具库: Drive.js
程序员老鱼
2022/12/02
1.2K0
Webpack前端技术类文章
webpack是前端打包工具,是大前端自动化工厂的重要组成部分,webpack的主要是打包,webpack作为自动化工具链的一部分集成更大的工具系统,而不是将一切需求的实现都寄望于webpack。
达达前端
2021/10/20
1.7K0
使用Astro、Qwik 和 Fuse.js构建网站搜索
利用 Astro 的内容集合、静态端点和 Qwik 的 Astro 集成以及 Fuse.js,构建网站搜索功能的方法。
云云众生s
2024/03/28
2240
使用Astro、Qwik 和 Fuse.js构建网站搜索
让我告诉你一些强无敌的 NPM 软件包(超实用,收藏!)
在这里,我整理出一份个人最喜欢的 NPM 软件包清单。为了便于浏览,我还对它们进行了分类,希望呈现出更加清晰的结构。
coder_koala
2021/07/08
3.1K0
让我告诉你一些强无敌的 NPM 软件包(超实用,收藏!)
处理Excel文件最简单、最精致的JS库
在 web 开发中,管理后台生成 excel 报表并且下载,一个很常用的功能,很多 Javascript 开发者也提供了很多的这方面的工具来实现这一功能。 今天大师兄给大家分享一个小众的Excel文件解析器和生成器:node-xlsx
程序员老鱼
2022/12/02
4.5K0
Vue-CoreVideoPlayer 一款基于 vue.js 的轻量级、优秀的视频播放器组件
Vue-CoreVideoPlayer的说明文档和sample都很完善,上手十分容易。
程序员老鱼
2022/12/02
2.8K0
鹅厂官方H5调试神器!
今天大师兄碰到一新来的实习生在使用 alert 调试H5页面,仿佛看到大师兄年少时羞涩的样子...
程序员老鱼
2022/12/02
7880
Sequelize 快速入门
Sequelize 是一个基于 Promise 的 Node.js ORM,目前支持 Postgres、MySQL、SQLite 和 Microsoft SQL Server。它具有强大的事务支持,关联关系、读取和复制等功能。
阿宝哥
2019/11/06
8.3K0
相关推荐
被尤雨溪/阮一峰等大神推荐的UI组件库
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验