A Vue.js Pluggin for Fuzzy Search Library

A Vue.js Pluggin for Fuzzy Search Library

A Vue.js pluggin for fuzzy search library, Fuse.js There are two ways to use this plugin. The vue-fuse component, or the $search method. Be sure to take a look at the documentation for both below.

vue-fuse

A Vue.js pluggin for fuzzy search library, Fuse.js There are two ways to use this plugin. The vue-fuse component, or the $search method. Be sure to take a look at the documentation for both below.

Install

npm install vue-fuse
yarn add vue-fuse

In main.js

import VueFuse from 'vue-fuse'

Vue.use(VueFuse)

Full Fuse.js Documentation

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

$search Method

The $search instance method allows you to execute a search programmatically within your application. Calling the this.$search function will return a promise, that is fulfilled once Fuse.js returns completes the search. $search takes the following params:

  • term - (required) the search term or query that you will search by
  • list - (required) an array of items to search
  • options - (required) an object with fuse.js options. At minimum, you must provide an array of keys. Other options will default to the fuse.js defaults (see here: http://fusejs.io/)

$search example

this.$search(this.term, this.bikes, this.options).then(results => {
  this.searchResults = results
})

vue-fuse Component

The vue-fuse component can be added any of your existing Vue components. It creates an input html element, and takes props (listed below) to execute a search. Search results are then returned via events.

Compoment 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 | | placeholder | placeholder text for the input | String | "" | | eventName | give a name to the event emitted when the search results are updated | String | fuseResultsUpdated | | inputChangeEventName | give a name to the event emitted when the text in the input field is changed. This event payload contains the string of text in the input field | String | fuseInputChanged | | 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 | | tokenSeparator | Regex used to separate words when searching. Only applicable when tokenize is true. | Regex | RegExp(' ') | | 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 |

Component Demo / Example

<template>
  <vue-fuse :keys="keys" :list="bikes" :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 from vue-fuse Component

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.

Download Details:

Author: shayneo

Demo: https://vue-fuse-demo.netlify.app/

Source Code: https://github.com/shayneo/vue-fuse

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.