useFuse

分类

@Integrations

导出大小

424 B

包

@vueuse/integrations

上次更改

8 个月前

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

来自 Fuse.js 网站

什么是模糊搜索？
通常来说，模糊搜索（更正式的名称是近似字符串匹配）是一种查找与给定模式近似相等（而不是完全相等）的字符串的技术。

演示

源代码演练场（beta）

精确匹配区分大小写为空时匹配所有

Roslyn Mitchell 分数索引: 0

Cathleen Matthews 分数索引: 1

Carleton Harrelson 分数索引: 2

Allen Moores 分数索引: 3

John Washington 分数索引: 4

Brooke Colton 分数索引: 5

Mary Rennold 分数索引: 6

Nanny Field 分数索引: 7

Chasity Michael 分数索引: 8

Oakley Giles 分数索引: 9

Johanna Shepherd 分数索引: 10

Maybelle Wilkie 分数索引: 11

Dawson Rowntree 分数索引: 12

Manley Pond 分数索引: 13

Lula Sawyer 分数索引: 14

Hudson Hext 分数索引: 15

Alden Senior 分数索引: 16

Tory Hyland 分数索引: 17

Constance Josephs 分数索引: 18

Larry Kinsley 分数索引: 19

可在 @vueuse/integrations 插件中使用。

作为对等依赖项安装 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
)

/*
 * Results:
 *
 * { "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
>