VueUse 中文网

主题

useFuse ​

使用 Fuse.js 的可组合项轻松实现模糊搜索。

¥Easily implement fuzzy search using a composable with Fuse.js.

来自 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).

示例 ​

源代码演练场

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.

安装 Fuse.js 作为对等依赖 ​

¥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 }

 *  */

类型声明 ​

显示类型声明
typescript
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>

源代码 ​

源代码 • 示例 • 文档

变更日志 ​

最近没有更改