Vue fuse.js fuzzy search engine

<template>
  <div class="hello">
    <el-input v-model="title" placeholder="Please enter the content"></el-input>
    <ul>
      <li v-for="item in result">Title: {{item. The item. The title}}<br />Author: {{item. Item. Author. FirstName}}<br />Score: {{item. Score}}</li>
    </ul>
  </div>
</template>

<script>
Fuse Fuse
import Fuse from "fuse.js";
export default {
  data() {
    return {
      title: "".fuse: null.result: [].books: [{title: "Java Virtual Machine".author: {
            firstName: "Wang hao".lastName: "wanghao"}}, {title: "Artificial intelligence".author: {
            firstName: "Hou Jianjun".lastName: "marquis"}}}; },created() {
    // 2. Initialize
    this.init();
  },
  watch: {
    // Use the same variable name
    title(newName, oldName) {
      / / the new values
      console.log(newName);
      / / the old value
      console.log(oldName);
      // 3. Search for content
      this.result = this.fuse.search(newName);
      console.log(this.result); }},methods: {
    / / initialization
    init() {
      var options = {
        shouldSort: true.// Whether to sort the list of results by score
        includeScore: true.// Whether the score should be included in the result set. A score of 0 means a perfect match, and a score of 1 means a complete mismatch.
        threshold: 0.6.// Matching algorithm threshold. A threshold of 0.0 requires a perfect match (letter and position), and a threshold of 1.0 will match anything.
        /** * Determines the distance between the match and the fuzzy position (specified by position). An exact letter match, that is, a character far from the fuzzy position will be treated as a complete mismatch. * A distance of 0 requires the match to be in the exact position specified, and a distance of 1000 requires a full match to be within 800 characters of the position found using threshold 0.8. * /
        location: 0.// Determine the approximate location of the pattern expected to be found in the text.
        distance: 100.maxPatternLength: 32.// The maximum length of the mode
        minMatchCharLength: 1.// The minimum character length of the pattern
        // Search for title and author name
        keys: ["title"."author.firstName"]};// Set data and parameters
      this.fuse = new Fuse(this.books, options); }}};</script>
Copy the code