Skip to content

useFuse

Category
Package
@vueuse/integrations
Last Changed
a month ago

Easily implement fuzzy search using a composable on top of the zero-dependency library Fuse.js.

From the Fuse.js website:

What is fuzzy searching?

Generally speaking, fuzzy searching (more formally known as approximate string matching) is the technique of finding strings that are approximately equal to a given pattern (rather than exactly).

Demo

Roslyn Mitchell Score Index: 0
Cathleen Matthews Score Index: 1
Carleton Harrelson Score Index: 2
Allen Moores Score Index: 3
John Washington Score Index: 4
Brooke Colton Score Index: 5
Mary Rennold Score Index: 6
Nanny Field Score Index: 7
Chasity Michael Score Index: 8
Oakley Giles Score Index: 9
Johanna Shepherd Score Index: 10
Maybelle Wilkie Score Index: 11
Dawson Rowntree Score Index: 12
Manley Pond Score Index: 13
Lula Sawyer Score Index: 14
Hudson Hext Score Index: 15
Alden Senior Score Index: 16
Tory Hyland Score Index: 17
Constance Josephs Score Index: 18
Larry Kinsley Score Index: 19
available in add-on @vueuse/integrations

Install Fuse.js as a peer dependency

NPM

npm install fuse.js
npm install fuse.js

Yarn

yarn add fuse.js
yarn add fuse.js

Usage

import { ref } from 'vue'
import { useFuse } from '@vueuse/integrations/useFuse'

const data = [
  'John Smith',
  'John Doe',
  'Jane Doe',
  'Phillip Green',
  'Peter Brown',
]

const input = ref('Jhon D')

const { results } = useFuse(input, data)

/*
 * Results:
 *
 * { "item": "John Doe", "index": 1 }
 * { "item": "John Smith", "index": 0 }
 * { "item": "Jane Doe", "index": 2 }
 *
 */
import { ref } from 'vue'
import { useFuse } from '@vueuse/integrations/useFuse'

const data = [
  'John Smith',
  'John Doe',
  'Jane Doe',
  'Phillip Green',
  'Peter Brown',
]

const input = ref('Jhon D')

const { results } = useFuse(input, data)

/*
 * Results:
 *
 * { "item": "John Doe", "index": 1 }
 * { "item": "John Smith", "index": 0 }
 * { "item": "Jane Doe", "index": 2 }
 *
 */

Type Declarations

export declare type FuseOptions<T> = Fuse.IFuseOptions<T>
export interface UseFuseOptions<T> {
  fuseOptions?: FuseOptions<T>
  resultLimit?: number
  matchAllWhenSearchEmpty?: boolean
}
export declare function useFuse<DataItem>(
  search: MaybeRef<string>,
  data: MaybeRef<DataItem[]>,
  options?: MaybeRef<UseFuseOptions<DataItem>>
): {
  results: ComputedRef<Fuse.FuseResult<DataItem>[]>
}
export declare type UseFuseReturn = ReturnType<typeof useFuse>
export declare type FuseOptions<T> = Fuse.IFuseOptions<T>
export interface UseFuseOptions<T> {
  fuseOptions?: FuseOptions<T>
  resultLimit?: number
  matchAllWhenSearchEmpty?: boolean
}
export declare function useFuse<DataItem>(
  search: MaybeRef<string>,
  data: MaybeRef<DataItem[]>,
  options?: MaybeRef<UseFuseOptions<DataItem>>
): {
  results: ComputedRef<Fuse.FuseResult<DataItem>[]>
}
export declare type UseFuseReturn = ReturnType<typeof useFuse>

Source

SourceDemoDocs

Contributors

Anthony Fu
Darryl Noakes
wheat
Jessica Sachs

Changelog

v6.6.0 on 10/16/2021
9eb4e - feat: new function (#821)
useFuse has loaded