<script>
import QuickSearchBar from "svelte-quicksearch-bar@latest";
const onPick = ({detail}) => selectedOption = detail;
let options = [
{label: "Example", link: "/"},
{label: "Search with fuzzy", link: "/also"},
{label: "Bolds the text", link: "/in"},
{label: "Other example", link: "/the-link"},
];
let inputEl;
let selectedOption;
let value;
</script>
<style>
.secondary-text {
font-size: 0.7em;
color: purple;
}
input {
width: 100%;
}
</style>
<QuickSearchBar {options} {inputEl} bind:value on:pick={onPick} keys={['label', 'link']}>
<span slot="input">
<input type="text" bind:value bind:this={inputEl} />
</span>
<span slot="item" let:option>
{@html option.html.label}
<span class="secondary-text">
{@html option.html.link}
</span>
</span>
</QuickSearchBar>