Vue 3 Simple Typeahead allows customization through slots, making it easy to modify list headers, items, and footers for a personalized UI.
Using Slots for Customization
The component provides three slots:
#list-header: Displays a header above the suggestion list.#list-item-text: Customizes how items are displayed.#list-footer: Adds a footer at the bottom of the list.
Highlighting Search Matches
The boldMatchText function can be used in the #list-item-text slot to highlight matching text dynamically.
Example Usage
<vue3-simple-typeahead :items="['Vue', 'React', 'Angular']">
<template #list-header>Available Frameworks:</template>
<template #list-item-text="slot">
<span v-html="slot.boldMatchText(slot.itemProjection(slot.item))"></span>
</template>
<template #list-footer>End of List</template>
</vue3-simple-typeahead>
With this approach, you can style and format the suggestions list according to your needs, enhancing user engagement.