Wrapper for Flexsearch.
npm i -S flexsearch @noction/vue-use-flexsearch
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.
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 10This 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>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4