useFuse

分類

@Integrations

匯出大小

467 B

套件

@vueuse/integrations

最後更改

5 天前

使用 Fuse.js 的 composable 輕鬆實作模糊搜尋。

來自 Fuse.js 網站

什麼是模糊搜尋？
一般來說，模糊搜尋（更正式的名稱為近似字串比對）是一種尋找與給定模式大致相等的字串（而不是完全相等）的技術。

範例

來源

精確比對區分大小寫空白時比對全部

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 }
 *
 */

類型宣告

顯示類型宣告

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>