Fuse.js 强大的，轻量级的模糊搜索库

大家好我是辉子，遇到有用的东西就记录下来，也希望和您成为朋友。关注 公众号: 【罗米笔记】，有更好的笔记会及时更新

Fuse.js是一个功能强大、轻量级的模糊搜索库，没有依赖关系。

• 什么是模糊搜索？

模糊搜索(更正式地称为近似字符串匹配)是查找与给定模式近似相等(而不是完全相等)的字符串的技术。

• 什么时候可以使用Fuse.js

它可能并不适用于所有情况，但根据您的搜索需求，它可能是理想的。例如: 

当您希望对小到中等规模的数据集进行客户端模糊搜索时。 

当你不能建立一个专门的后端来处理搜索时。ElasticSearch或Algolia虽然都是很棒的服务，但对于您的特定用例来说可能有些多余。

• 使用

npm install fuse.js

<script setup lang="ts">import Fuse from 'fuse.js'import { ref } from 'vue'
const articles = ref([  {    id: 1,    title: '桂林志异：龙王起水',    author: '始安公士或于梦',    content:      '仲夏午后，乌云铺天而来，大唐岭南道桂州的治所临桂县（今桂林市）陷入一片晦暗。漓水江畔飞沙走石，竹林起涛，树海翻腾。狂风砸在漓龙村青年廖铁虎的黑脸上。他看了看天，赶紧让弟弟廖铜牛把竹筏从江心划向码头。待二人赤脚跑上岸时，拇指粗的雨柱从天而降，像无数把寒光闪闪的宝剑，将桂花树的枝杈斩落一地，捅得红壤黄泥四分五裂。泥水汇流成无数小溪，势不可挡地汇入江中，宛如百川归海。天晴时的漓水，清可见河床的卵石。这才一顿饭的工夫，碧水变成了浊浪排空的“黄河”，仿佛一条缠绕群峰的黄绸带。'  },  {    id: 2,    title: '离婚后，妈宝男前夫后悔了',    author: '琳琅文学于梦',    content: `我的名字叫于梦，今年三十五岁，每天不是在工作，就是在做家务。然而我努力经营十年的婚姻，竟然在第十年的结婚纪念日当天，彻底破碎！我父母去世之前，将家中老宅公证到了我的名下。现在房子拆迁了，疯了两套房子和一点补偿金。可我还没去新房子看过呢，婆婆就把小房子写上了她的名字，而大房子则给了我老公那个赌鬼弟弟做婚房。我们一家四口，就挤在小房子里生活！“妈！那套大房子是学区房，是用来给我们孩子上学的，怎么能给小树子啊！”为了孩子上学，我坚决不同意婆婆的决定。婆婆也没想过从没和她生过气的我，竟然会这么强硬，脸色瞬间就难看了起来：“你生的是女儿啊！女儿读什么好学校啊，随便上到初中就能出去工作啦，早点嫁人，还能早换点彩礼回来！”`  }])const search = ref('')const fuse = new Fuse(articles.value, {  shouldSort: true,  includeScore: true,  threshold: 0.6,  location: 0,  distance: 100,  minMatchCharLength: 1,  keys: [    { name: 'title', weight: 0.9 },    { name: 'author', weight: 0.5 }  ]})const result = ref<any>([])function searchChange() {  result.value = fuse.search(search.value)}</script>
<template>  <input type="text" v-model="search" @input="searchChange" />  <ul v-if="result.length === 0">    <li v-for="article in articles" :key="article.id">      <h2>{{ article.title }}</h2>      <p>{{ article.content }}</p>    </li>  </ul>  <ul v-else>    <li v-for="article in result" :key="article.id">      <h2>{{ article.item.title }}</h2>      <p>{{ article.item.content }}</p>    </li>  </ul></template>

github:  https://github.com/krisk/Fuse