前端轻量级模糊查询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 = []
      }
}

配置项