dannyfeliz/vue-fuse

vue-fuse

A Vue.js pluggin for fuzzy search library, Fuse.js

Install

npm install --save vue-fuse

In main.js

import VueFuse from 'vue-fuse'

Vue.use(VueFuse)

Full Documentation

This is just a simple drop in component leverage Fuse.js. For complete documentation, check out http://fusejs.io/

Props

Most of the props line up with Fuse.js options with the defaults set to match the defaut Fuse.js behavior.

Property	Desc	Type	Default values
eventName	give a name to the event emitted when the search results are updated	String	fuseResultsUpdated
defaultAll	If true, results will inclide ALL items in list when search is null. If false, results will inclide no items when search is null.	Boolean	true
list	The array of items that Fuse will search	Array
caseSensitive	Indicates whether comparisons should be case sensitive.	Boolean	false
includeScore	Whether the score should be included in the result set. A score of 0 indicates a perfect match, while a score of 1 indicates a complete mismatch.	Boolean	false
includeMatches	Whether the matches should be included in the result set. When true, each record in the result set will include the indices of the matched characters: indices: [start, end]. These can consequently be used for highlighting purposes.	Boolean	false
minMatchCharLength	When set to include matches, only the matches whose length exceeds this value will be returned. (For instance, if you want to ignore single character index returns, set to 2)	Number	1
shouldSort	Whether to sort the result list, by score.	Boolean	true
tokenize	When true, the algorithm will search individual words and the full string, computing the final score as a function of both. In this case, the threshold, distance, and location are inconsequential for individual tokens, and are thus ignored.	Boolean	false
matchAllTokens	When true, the result set will only include records that match all tokens. Will only work if tokenize is also true.	Boolean	false
findAllMatches	When true, the matching function will continue to the end of a search pattern even if a perfect match has already been located in the string.	Boolean	false
id	The name of the identifier property. If specified, the returned result will be a list of the items' identifiers, otherwise it will be a list of the items.	String	''
keys	List of properties that will be searched. This supports nested properties, weighted search, searching in arrays of strings and objects	Array
location	Determines approximately where in the text is the pattern expected to be found.	Number	0
threshold	At what point does the match algorithm give up. A threshold of 0.0 requires a perfect match (of both letters and location), a threshold of 1.0 would match anything.	Number	0.6
distance	Determines how close the match must be to the fuzzy location (specified by location). An exact letter match which is distance characters away from the fuzzy location would score as a complete mismatch. A distance of 0 requires the match be at the exact location specified, a distance of 1000 would require a perfect match to be within 800 characters of the location to be found using a threshold of 0.8.	Number	100
maxPatternLength	The maximum length of the pattern. The longer the pattern (i.e. the search query), the more intensive the search operation will be. Whenever the pattern exceeds the maxPatternLength, an error will be thrown.	Number	32

DEMO / EXAMPLE

• LIVE DEMO
• DEMO SOURCE

<template>
  <vue-fuse :keys="keys" :list="list" :defaultAll="false" :eventName="bikesChanged"></vue-fuse>
</template>

<script>
export default {
  data () {
    return {
      bikes: [
        {
          brand: "Schwinn",
          model: {
            name: "Classic",
            id: "1345"
          }
        },
        {
          brand: "Red Line",
          model: {
            name: "Flight",
            id: "5430"
          }
        },
        {
          brand: "Hoffman",
          model: {
            name: "Condore",
            id: "0543"
          }
        },
        {
          brand: "Tribe",
          model: {
            name: "CRMO",
            id: "0432"
          }
        }
      ],
      keys: ["brand", "model.name", "model.id"]
    }
  }
}
</script>

Accessing Results

Results are stored in the result data array of the vue-fuse component. The component watches the result array and emits an event when the array is changed. This event is named fuseResultsUpdated and contains the result array. You can also name the event yourself (this is handy if you have more than one instance of vue-fuse in your application) by passing in a string to the eventName prop.