useFlexSearch
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>