useFuse
| Category | @Integrations |
|---|---|
| Export Size | 445 B |
| Package | @vueuse/integrations |
| Last Changed | 2 weeks ago |
Easily implement fuzzy search using a composable with Fuse.js.
From the Fuse.js website:
Available in the @vueuse/integrations add-on.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).
Install Fuse.js as a peer dependency
NPM
npm install fuse.jsYarn
yarn add fuse.jsUsage
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
© 2019-present Anthony Fu
Licensed under the MIT License.
https://vueuse.org/integrations/useFuse/