@vuex-orm/plugin-search NPM

Vuex ORM Search plugin adds a search() method to the vuex-orm query methods to easily filter matched records using fuzzy search logic from the Fuse.js library.

A simple example to search for 'john' within your query:

const users = User.query().search('john').get()

Installation

Install @vuex-orm/plugin-search alongside with Vuex ORM Core.

# Via NPM.
npm install @vuex-orm/core @vuex-orm/plugin-search --save

# Via Yarn.
yarn add @vuex-orm/core @vuex-orm/plugin-search

Setup

Import the search plugin in the Vuex Store entry file.

import VuexORM from '@vuex-orm/core'
import VuexORMSearch from '@vuex-orm/plugin-search'

VuexORM.use(VuexORMSearch, {
  // Configure default fuse.js options here (see "Configuration" section below).
})

API

The search plugin method accepts two parameters.

search(terms: string | string[], options: object): this

terms – any string or an array of strings.
options – see the "Configurations" section below.

NOTE: If passing an array of search terms, the results assume some element in the array to be matched.

Configurations

The plugin provides opinionated default Fuse.js options for token-based matching for optimum performance. These options can be easily changed at two stages of the plugin lifecycle:

Plugin installation (sets the global default options).
Runtime within the search() query chain.

See: Fuse.js for demo.

Property	Description	Default
searchPrimaryKey	Also search the primary key	`false`
location	Approximately where in the text is the pattern expected to be found	`0`
distance	Determines how close the match must be to the fuzzy location	`100`
threshold	0.0 requires a perfect match, and a threshold of 1.0 would match anything	`0.3`
maxPatternLength	Machine word size	`32`
caseSensitive	Indicates whether comparisons should be case sensitive	`false`
tokenSeparator	Regex used to separate words when searching. Only applicable when tokenize is true	`/ +/g`
findAllMatches	When true, the algorithm continues searching to even if a perfect match is found	`false`
minMatchCharLength	Minimum number of characters that must be matched before a result is considered a match	`1`
keys	An array of fields (columns) to be included in the search	Keys from `Model.fields()`
shouldSort	Whether to sort the result list, by score	`false`
tokenize	When true, the search algorithm will search individual words and the full string, computing the final score as a function of both. NOTE: that when tokenize is true, the threshold, distance, and location are inconsequential for individual tokens	`false`
matchAllTokens	When true, the result set will only include records that match all tokens. Will only work if tokenize is also true. NOTE: It is better to use multiple .search() query chains if you have multiple terms that need to match.	`false`
verbose	Will print to the console. Useful for debugging.	`false`

Option Examples

Here are some examples on how to use the search plugin with case specific options.

During Plugin Install

For example, if we want to match based on case sensitive and no fuzzy search logic (perfect match).

VuexORM.use(VuexORMSearch, {
  caseSensitive: true,
  threshold: 0
})

During Query Chain

The global install options will now default to case sensitive and no fuzzy logic, but for example we have a run-time case we need to ignore case and implement a slightly more strict fuzzy search threshold.

Let's also specify the need to only search the firstName and lastName fields.

const users = User.query().search('john', {
  caseSensitive: false,
  threshold: 0.3,
  keys: ['firstName', 'lastName']
}).get()

Finding Results Matching Multiple Terms

Let's find all matches where both pat and male exist in our records, and sort by the date added.

const data = User.query().search(['pat', 'male'], {
  keys: ['firstName', 'gender']
}).get()

Contribution

We are excited that you are interested in contributing to Vuex ORM Search! Anything from raising an issue, submitting an idea of a new feature, or making a pull request is welcome!