useFuse

Category

@Integrations

Export Size

445 B

Package

@vueuse/integrations

Last Changed

11 months ago

Easily implement fuzzy search using a composable with 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

source

Full Name First Name Last Name

Exact MatchCase SensitiveMatch all when empty

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 the @vueuse/integrations add-on.

Install Fuse.js as a peer dependency

NPM

npm install fuse.js@^6

Yarn

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 }
 *
 */

Type Declarations

export type FuseOptions<T> = Fuse.IFuseOptions<T>
export interface UseFuseOptions<T> {
  fuseOptions?: FuseOptions<T>
  resultLimit?: number
  matchAllWhenSearchEmpty?: boolean
}
export declare function useFuse<DataItem>(
  search: MaybeRefOrGetter<string>,
  data: MaybeRefOrGetter<DataItem[]>,
  options?: MaybeRefOrGetter<UseFuseOptions<DataItem>>,
): {
  fuse: Ref<{
    search: <R = DataItem>(
      pattern: string | Fuse.Expression,
      options?: Fuse.FuseSearchOptions | undefined,
    ) => Fuse.FuseResult<R>[]
    setCollection: (
      docs: readonly DataItem[],
      index?: Fuse.FuseIndex<DataItem> | undefined,
    ) => void
    add: (doc: DataItem) => void
    remove: (predicate: (doc: DataItem, idx: number) => boolean) => DataItem[]
    removeAt: (idx: number) => void
    getIndex: () => Fuse.FuseIndex<DataItem>
  }>
  results: ComputedRef<Fuse.FuseResult<DataItem>[]>
}
export type UseFuseReturn = ReturnType<typeof useFuse>

Source

Source • Demo • Docs

Contributors

Anthony Fu

wheat

Darryl Noakes

Doctorwu

Jessica Sachs

Changelog

v10.0.0-beta.4 on 4/13/2023

4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter

0a72b - feat(toValue): rename resolveUnref to toValue