108 lines
2.4 KiB
Markdown
108 lines
2.4 KiB
Markdown
---
|
|
category: '@Integrations'
|
|
---
|
|
|
|
# useFuse
|
|
|
|
Easily implement fuzzy search using a composable with [Fuse.js](https://github.com/krisk/fuse).
|
|
|
|
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).
|
|
|
|
## Install Fuse.js as a peer dependency
|
|
|
|
### NPM
|
|
|
|
```bash
|
|
npm install fuse.js@^7
|
|
```
|
|
|
|
### Yarn
|
|
|
|
```bash
|
|
yarn add fuse.js
|
|
```
|
|
|
|
## Usage
|
|
|
|
```ts
|
|
import { useFuse } from '@vueuse/integrations/useFuse'
|
|
import { shallowRef } from 'vue'
|
|
|
|
const data = [
|
|
'John Smith',
|
|
'John Doe',
|
|
'Jane Doe',
|
|
'Phillip Green',
|
|
'Peter Brown',
|
|
]
|
|
|
|
const input = shallowRef('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
|
|
|
|
```ts
|
|
export type FuseOptions<T> = 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 | Expression,
|
|
options?: FuseSearchOptions,
|
|
) => FuseResult<R>[]
|
|
setCollection: (
|
|
docs: readonly DataItem[],
|
|
index?: FuseIndex<DataItem> | undefined,
|
|
) => void
|
|
add: (doc: DataItem) => void
|
|
remove: (predicate: (doc: DataItem, idx: number) => boolean) => DataItem[]
|
|
removeAt: (idx: number) => void
|
|
getIndex: () => FuseIndex<DataItem>
|
|
},
|
|
| Fuse<DataItem>
|
|
| {
|
|
search: <R = DataItem>(
|
|
pattern: string | Expression,
|
|
options?: FuseSearchOptions,
|
|
) => FuseResult<R>[]
|
|
setCollection: (
|
|
docs: readonly DataItem[],
|
|
index?: FuseIndex<DataItem> | undefined,
|
|
) => void
|
|
add: (doc: DataItem) => void
|
|
remove: (
|
|
predicate: (doc: DataItem, idx: number) => boolean,
|
|
) => DataItem[]
|
|
removeAt: (idx: number) => void
|
|
getIndex: () => FuseIndex<DataItem>
|
|
}
|
|
>
|
|
results: ComputedRef<FuseResult<DataItem>[]>
|
|
}
|
|
export type UseFuseReturn = ReturnType<typeof useFuse>
|
|
```
|