useFuse

类别

@Integrations

导出体积

424 B

依赖包

@vueuse/integrations

上次更改

6 months ago

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

来自 Fuse.js 网站的介绍：

什么是模糊搜索？
通常情况下，模糊搜索 (更正式地称为近似字符串匹配) 是一种找到与给定模式大致相等的字符串的技术 (而不是完全相等)。

示例

源码 playground (beta)

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.

将 Fuse.js 安装为对等依赖项

使用 NPM

bash

npm install fuse.js@^7

使用 Yarn

bash

yarn add fuse.js

使用方法

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
)

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

类型声明

显示类型声明

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
>