3.使用搜索引擎如:ElasticSearch或Algolia等
3.ElasticSearch 或 Algolia 虽然都是很棒的服务,但对于您的特定用例来说可能有些过度
NPM npm install fuse.js Yarn yarn add fuse.js CDN 引入 <script src="https://cdn.jsdelivr.net/npm/fuse.js@7.0.0"></script>引入
import Fuse from 'fuse.js'CommonJS 语法
const Fuse = require('fuse.js')
Tips: 使用npm或者yarn引入,支持两种模块语法引入,如果是使用cdn引入,那么Fuse将被注册为全局变量。直接使用即可
// 1. List of items to search in const books = [ { title: "Old Man's War", author: { firstName: 'John', lastName: 'Scalzi' } }, { title: 'The Lock Artist', author: { firstName: 'Steve', lastName: 'Hamilton' } } ] // 2. Set up the Fuse instance const fuse = new Fuse(books, { keys: ['title', 'author.firstName'] }) // 堆代码 duidaima.com // 3. Now search! fuse.search('jon') // Output: // [ // { // item: { // title: "Old Man's War", // author: { // firstName: 'John', // lastName: 'Scalzi' // } // }, // refIndex: 0 // } // ]从上述代码中可以看到我们要通过Fuse 对books的这个数组进行模糊搜索,构建的Fuse对象中,模糊搜索的key定义为['title', 'author.firstName'],支持对title及author.firstName这两个字段进行搜索。然后执行fuse的search API就能过滤出我们的期望结果。整体代码还是非常简单的。
const options = { keys: ['title', 'author'], // 指定搜索key值,可多选 isCaseSensitive: false, //是否区分大小写 默认为false includeScore: false, //结果集中是否展示匹配项的分数字段, 分数越大代表匹配程度越低,区间值为0-1,注意:当此项为true时,会返回完整的结果集,只不过每一项中携带了score分数字段 includeMatches: false, //匹配项是否应包含在结果中。当时true,结果的每条记录都包含匹配项的索引。这个通常我们用来对搜索内容做高亮处理 threshold: 0.6, // 阈值控制匹配的敏感度,默认值为0.6,如果要完全匹配这里要设置为0 shouldSort: true, // 是否对结果进行排序 location: 0, // 匹配的位置,0 表示开头匹配 distance: 100, // 搜索的最大距离 minMatchCharLength: 2, // 最小匹配字符长度 };出了上述常用的一些配置项之外,Fuse还支持更高阶模糊搜索,如权重搜索,嵌套搜索,运算符拓展搜索,具体高阶用法可以参考官方文档。Fuse的主要实现原理是通过改写Bitap 算法(近似字符串匹配)算法的内部实现来支撑其模糊搜索的算法依据,后续会出一篇文章看一下作者源码的算法实现。