前端轻量级模糊查询fuse.js

Fuse.js是一个功能强大、轻量级的模糊搜索库,没有依赖关系。
  • 简单代码,实现模糊搜索、处理搜索,甚至不需要后端开发技术
  • 数据量大的情况下表现优秀,性能很好
  • 无 DOM 依赖,既可以在前端使用,也支持在 node.js 后端使用
  • 强大的搜索支持:不仅支持搜索字符串数组、对象数组,支持嵌套搜索、加权搜索等
使用步骤如下:

1、安装fuse.js插件。

npm install --save fuse.js

2、在vue页面中引入:

import Fuse from 'fuse.js'

3、在vue生命周期钩子mounted或者在依赖发生改变时调用initFuse:

initFuse(list) {
  this.fuse = new Fuse(list, {
       shouldSort: true,
       threshold: 0.4,
       location: 0,
       distance: 100,
       maxPatternLength: 32,
       minMatchCharLength: 1,
       keys: [{
         name: 'title',
         weight: 0.7
       }, {
         name: 'path',
         weight: 0.3
       }]
  })

4、在需要模糊查询时调用fuse.search:

querySearch(query) {
      if (query !== '') {
        this.options = this.fuse.search(query)
      } else {
        this.options = []
      }
}
配置项
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容