52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import MiniSearch from 'minisearch'
|
|
|
|
const query = ref('')
|
|
const { data } = await useAsyncData('search-data', () => queryCollectionSearchSections('docs'))
|
|
|
|
const miniSearch = new MiniSearch({
|
|
fields: ['title', 'content'],
|
|
storeFields: ['title', 'content'],
|
|
searchOptions: {
|
|
prefix: true,
|
|
fuzzy: 0.2
|
|
}
|
|
})
|
|
|
|
// Add data to the MiniSearch instance
|
|
miniSearch.addAll(toValue(data.value || []))
|
|
const result = computed(() => miniSearch.search(toValue(query)).slice(0, 10))
|
|
</script>
|
|
|
|
<template>
|
|
<UContainer class="p-4">
|
|
<UCard>
|
|
<UInput
|
|
v-model="query"
|
|
placeholder="Search..."
|
|
class="w-full"
|
|
/>
|
|
<ul>
|
|
<li
|
|
v-for="link of result"
|
|
:key="link.id"
|
|
class="mt-2"
|
|
>
|
|
<UButton
|
|
variant="ghost"
|
|
class="w-full"
|
|
:to="link.id"
|
|
>
|
|
<div class="flex flex-col">
|
|
<span class="text-black dark:text-white font-semibold">{{ link.title }}</span>
|
|
<span class="text-gray-500 text-xs truncate">
|
|
{{ link.content?.slice(0, 100) }}...
|
|
</span>
|
|
</div>
|
|
</UButton>
|
|
</li>
|
|
</ul>
|
|
</UCard>
|
|
</UContainer>
|
|
</template>
|