javascript - Fuse.js : retrieve records which exactly match a multiple word search

Question

使用 Fuse.js我正在尝试在 JS 对象中进行“多个单词”搜索，以获取包含所查找的每个单词的记录。

我的数据结构如下(来自 fuse.js ):

[{
    title: "The Lost Symbol",
    author: {
      firstName: "Dan",
      lastName: "Brown"
    }
 }, ...]

我的问题是我的设置适用于单字搜索(例如 Brown)，但不适用于更多( Dan Brown 或 Dan Brown Vinci)。

fuse 选项:

{
    shouldSort: true,
    matchAllTokens: true,
    findAllMatches: true,
    includeScore: true,
    threshold: 0,
    location: 0,
    distance: 100,
    maxPatternLength: 32,
    minMatchCharLength: 1,
    keys: [
        "title",
        "author.firstName",
        "author.lastName"
    ]
}

new Vue({
    el: "#app",
    data: {
        Fuse: null,
        searchText: '',
        result : [],
        fuseOptions: {
            shouldSort: true,
            matchAllTokens: true,
            findAllMatches: true,
            includeScore: true,
            threshold: 0,
            location: 0,
            distance: 100,
            maxPatternLength: 32,
            minMatchCharLength: 1,
            keys: [
                "title",
                "author.firstName",
                "author.lastName"
            ]
        },
        list: [{
                title: "Old Man's War",
                author: {
                    firstName: "John",
                    lastName: "Scalzi"
                }
            },
            {
                title: "The Lock Artist",
                author: {
                    firstName: "Steve",
                    lastName: "Hamilton"
                }
            },
            {
                title: "HTML5",
                author: {
                    firstName: "Remy",
                    lastName: "Sharp"
                }
            },
            {
                title: "Right Ho Jeeves",
                author: {
                    firstName: "P.D",
                    lastName: "Woodhouse"
                }
            },
            {
                title: "The Code of the Wooster",
                author: {
                    firstName: "P.D",
                    lastName: "Woodhouse"
                }
            },
            {
                title: "Thank You Jeeves",
                author: {
                    firstName: "P.D",
                    lastName: "Woodhouse"
                }
            },
            {
                title: "The DaVinci Code",
                author: {
                    firstName: "Dan",
                    lastName: "Brown"
                }
            },
            {
                title: "Angels & Demons",
                author: {
                    firstName: "Dan",
                    lastName: "Brown"
                }
            },
            {
                title: "The Silmarillion",
                author: {
                    firstName: "J.R.R",
                    lastName: "Tolkien"
                }
            },
            {
                title: "Syrup",
                author: {
                    firstName: "Max",
                    lastName: "Barry"
                }
            },
            {
                title: "The Lost Symbol",
                author: {
                    firstName: "Dan",
                    lastName: "Brown"
                }
            },
            {
                title: "The Book of Lies",
                author: {
                    firstName: "Brad",
                    lastName: "Meltzer"
                }
            },
            {
                title: "Lamb",
                author: {
                    firstName: "Christopher",
                    lastName: "Moore"
                }
            },
            {
                title: "Fool",
                author: {
                    firstName: "Christopher",
                    lastName: "Moore"
                }
            },
            {
                title: "Incompetence",
                author: {
                    firstName: "Rob",
                    lastName: "Grant"
                }
            },
            {
                title: "Fat",
                author: {
                    firstName: "Rob",
                    lastName: "Grant"
                }
            },
            {
                title: "Colony",
                author: {
                    firstName: "Rob",
                    lastName: "Grant"
                }
            },
            {
                title: "Backwards, Red Dwarf",
                author: {
                    firstName: "Rob",
                    lastName: "Grant"
                }
            },
            {
                title: "The Grand Design",
                author: {
                    firstName: "Stephen",
                    lastName: "Hawking"
                }
            },
            {
                title: "The Book of Samson",
                author: {
                    firstName: "David",
                    lastName: "Maine"
                }
            },
            {
                title: "The Preservationist",
                author: {
                    firstName: "David",
                    lastName: "Maine"
                }
            },
            {
                title: "Fallen",
                author: {
                    firstName: "David",
                    lastName: "Maine"
                }
            },
            {
                title: "Monster 1959",
                author: {
                    firstName: "David",
                    lastName: "Maine"
                }
            }
        ]

    },
    methods: {
        fuseSearch: function() {
            let self = this;
            
            this.result = this.Fuse.search(self.searchText)
        }
    },

    mounted() {
    		let self = this
        this.Fuse = new window.Fuse(self.list, self.fuseOptions);
        

    }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

table {
  width: 100%;
  margin-top:20px
}

table th{
  font-weight:bold
}
table td{
  padding-top:5px
}

input{
  height:30px;
  width:200px;
  font-size:14px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.1/fuse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <input type="text" v-model="searchText" @keyup="fuseSearch()" placeholder="search for text">
  
  
  <div v-if="result.length == 0" style="margin-top:10px">No matching results, here is the full list</div>
  <div v-else style="margin-top:10px">{{result.length}} records found</div>
  
  
  
  <table>
    <tr>
      <th>Title</th>
      <th>FistName</th>
      <th>LastName</th>
      <th>Score</th>
    </tr>
    
    <tr v-if="result.length >0" v-for="data in result" >
      <td>{{data.item.title}}</td>
      <td>{{data.item.author.firstName}}</td>
      <td>{{data.item.author.lastName}}</td>
      <td>{{Math.round(data.score*100,2)/100}}</td>
    </tr>
    
    <tr v-if="result.length == 0" v-for="data in list">
    
      <td>{{data.title}}</td>
      <td>{{data.author.firstName}}</td>
      <td>{{data.author.lastName}}</td>
      <td></td>
    </tr>
  </table>

</div>

Answer 1

不幸的是，fuse.js 并没有查看所有字段，而是查看一个匹配的字段。我通过将所有字段放入一个带有字符串数组的字段来解决了这个问题。
例子:

[{
    title: "The Lost Symbol",
    author: {
      firstName: "Dan",
      lastName: "Brown"
    },
    keywords: ["The Lost Symbol", "Dan", "Brown"] //values of title, firstname & lastname
 }, ...]

并且只需指定关键字 Fuse 选项的 keys 字段

{
    shouldSort: true,
    matchAllTokens: true,
    findAllMatches: true,
    includeScore: true,
    threshold: 0,
    location: 0,
    distance: 100,
    maxPatternLength: 32,
    minMatchCharLength: 1,
    keys: ["keywords"]  //just put keywords alone
}

这对我有用。希望它也适合你。