(精华)2020年7月16日 vue Fuse.js模糊搜索引擎

<template>
  <div class="hello">
    <el-input v-model="title" placeholder="请输入内容"></el-input>
    <ul>
      <li v-for="item in result">
        标题： {{item.item.title}}
        <br />
        作者： {{item.item.author.firstName}}
        <br />
        分数： {{item.score}}
      </li>
    </ul>
  </div>
</template>

<script>
// 1. 引入Fuse
import Fuse from "fuse.js";
export default {
  data() {
    return {
      title: "",
      fuse: null,
      result: [],
      books: [
        {
          title: "Java虚拟机",
          author: {
            firstName: "王浩",
            lastName: "wanghao"
          }
        },
        {
          title: "人工智能",
          author: {
            firstName: "侯建军",
            lastName: "marquis"
          }
        }
      ]
    };
  },
  created() {
    // 2. 初始化
    this.init();
  },
  watch: {
    // 要变量名一致
    title(newName, oldName) {
      // 新值
      console.log(newName);
      // 旧值
      console.log(oldName);
      // 3. 搜索内容
      this.result = this.fuse.search(newName);
      console.log(this.result);
    }
  },
  methods: {
    // 初始化
    init() {
      var options = {
        shouldSort: true, // 是否按分数对结果列表排序
        includeScore: true, //  是否应将分数包含在结果集中。0分表示完全匹配，1分表示完全不匹配。
        threshold: 0.6, // 匹配算法阈值。阈值为0.0需要完全匹配（字母和位置），阈值为1.0将匹配任何内容。
        /**
         * 确定匹配与模糊位置（由位置指定）的距离。一个精确的字母匹配，即距离模糊位置很远的字符将被视为完全不匹配。
         *  距离为0要求匹配位于指定的准确位置，距离为1000则要求完全匹配位于使用阈值0.8找到的位置的800个字符以内。
         */
        location: 0, // 确定文本中预期找到的模式的大致位置。
        distance: 100,
        maxPatternLength: 32, // 模式的最大长度
        minMatchCharLength: 1, // 模式的最小字符长度
        // 搜索标题与作者名
        keys: ["title", "author.firstName"]
      };
      // 设置数据与参数
      this.fuse = new Fuse(this.books, options);
    }
  }
};
</script>



  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
  
67
  
68
  
69
  
70
  
71
  
72
  
73
  
74
  
75
  
76
  
77
  
78
  
79
  
80
  
81
  
82
  
83
  
84
 

文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。

原文链接：codeboy.blog.csdn.net/article/details/107378864