@noction/vue-use-flexsearch
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

useFlexSearch

NPM version NPM downloads codecov

Wrapper for Flexsearch.

Install

npm i -S flexsearch @noction/vue-use-flexsearch

API

function useFlexSearch <T extends Record<"id", Id>, D = unknown> (
    query: Ref<string>,
    providedIndex: Ref<Index | Document<D> | null>,
    store?: Ref<Array<T>>,
    searchOptions: SearchOptions = {},
    limit = 10
): { results: ComputedRef<T[]> }

By utilizing the useFlexSearch composable, you can provide your search query, index, and store as inputs, and obtain the results as an array. This optimizes searches by memoizing them, ensuring efficient searching.

Parameters

Name Type Description Default
query Ref The keyword which we are looking for
providedIndex Ref or Ref<Document> The Index or Document from Flexsearch
store Ref<Array> The list of item where we are looking
searchOptions Object Search options {}
limit 10 Max number of results to be returned 10

Usage

This code snippet creates a text input field and utilizes FlexSearch to execute a search on the index when the query is changed.

<script setup>
import { ref } from 'vue'
import { useFlexSearch } from '@noction/vue-use-flexsearch'
    
const store = [
  { id: 1, title: 'The Jungle Book' },
  { id: 2, title: 'Darcula' },
  { id: 3, title: 'Shōgun' }
]
const index = new Index({ preset: 'match' })

index.add(store[0])
index.add(store[1])
index.add(store[2])

const query = ref('')
const { results } = useFlexSearch(query, index, store)
</script>

<template>
  <div>
    <input v-model="query">
    <h1>Results</h1>
    <ul>
      <li
          v-for="result in results"
          :key="result.id"
          v-text="result.title"
      />
    </ul>
  </div>
</template>

Package Sidebar

Install

npm i @noction/vue-use-flexsearch

Weekly Downloads

43

Version

1.0.5

License

MIT

Unpacked Size

13.1 kB

Total Files

8

Last publish

Collaborators

  • melrose1
  • lwvemike
  • 50rayn