VueUse

Search

Search by
Other Options
Result count limit
Limit the number of results shown.

Results

Result Count: 0
No results

Source Data

  1. First name: Roslyn
    Last name: Mitchell
  2. First name: Cathleen
    Last name: Matthews
  3. First name: Carleton
    Last name: Harrelson
  4. First name: Allen
    Last name: Moores
  5. First name: John
    Last name: Washington
  6. First name: Brooke
    Last name: Colton
  7. First name: Mary
    Last name: Rennold
  8. First name: Nanny
    Last name: Field
  9. First name: Chasity
    Last name: Michael
  10. First name: Oakley
    Last name: Giles
  11. First name: Johanna
    Last name: Shepherd
  12. First name: Maybelle
    Last name: Wilkie
  13. First name: Dawson
    Last name: Rowntree
  14. First name: Manley
    Last name: Pond
  15. First name: Lula
    Last name: Sawyer
  16. First name: Hudson
    Last name: Hext
  17. First name: Alden
    Last name: Senior
  18. First name: Tory
    Last name: Hyland
  19. First name: Constance
    Last name: Josephs
  20. First name: Larry
    Last name: Kinsley

TIP

available in add-on @vueuse/integrations

useFuse

Reactive wrapper for Fuse.js.

Install

NPM 

npm install fuse.js

Yarn 

yarn add fuse.js

Usage 

import { ref } from 'vue'
import { useFuse } from '@vueuse/integrations/useFuse'

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

Type Declarations 

export declare type FuseOptions<T> = Fuse.IFuseOptions<T>
export declare type UseFuseOptions<T> = {
  fuseOptions?: FuseOptions<T>
  resultLimit?: number
  matchAllWhenSearchEmpty?: boolean
}
export declare function useFuse<DataItem>(
  search: MaybeRef<string>,
  data: MaybeRef<DataItem[]>,
  options?: MaybeRef<UseFuseOptions<DataItem>>
): {
  results: ComputedRef<Fuse.FuseResult<DataItem>[]>
}
export declare type UseFuseReturn = ReturnType<typeof useFuse>

Source

Source • Demo • Docs