useFuse

カテゴリ

@Integrations

エクスポートサイズ

445 B

パッケージ

@vueuse/integrations

最終更新日

先週

Fuse.jsを使用したコンポーザブルで、ファジー検索を簡単に実装できます。

Fuse.jsのWebサイトより

ファジー検索とは？
一般的に、ファジー検索（より正式には近似文字列マッチングとして知られています）は、与えられたパターンとほぼ等しい文字列（正確なものというよりも）を見つけるための手法です。

デモ

ソース

完全一致大文字小文字を区別する空のときにすべて一致

ロズリン・ミッチェルスコアインデックス: 0

キャスリーン・マシューズスコアインデックス: 1

カールトン・ハレルソンスコアインデックス: 2

アレン・ムーアズスコアインデックス: 3

ジョン・ワシントンスコアインデックス: 4

ブルック・コルトンスコアインデックス: 5

メアリー・レノルドスコアインデックス: 6

ナニー・フィールドスコアインデックス: 7

チャスティティ・マイケルスコアインデックス: 8

オークリー・ギレススコアインデックス: 9

ジョアンナ・シェパードスコアインデックス: 10

メイベル・ウィルキースコアインデックス: 11

ドーソン・ラウントリースコアインデックス: 12

マンリー・ポンドスコアインデックス: 13

ルーラ・ソーヤースコアインデックス: 14

ハドソン・ヘクストスコアインデックス: 15

オールデン・シニアスコアインデックス: 16

トリー・ハイランドスコアインデックス: 17

コンスタンス・ジョセフススコアインデックス: 18

ラリー・キンズリースコアインデックス: 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 { ref } from 'vue'

const data = [
  'John Smith',
  'John Doe',
  'Jane Doe',
  'Phillip Green',
  'Peter Brown',
]

const input = ref('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>