Search
A component to search. It is different from a combobox, as it requires a function.
<script>
const items = ['item1', 'item2', 'item3']
const search = async (q) => {
await new Promise((res, rej) => setTimeout(() => res(null), 1000))
return items.filter((i) => i.includes(q))
}
const extractName = (i) => i
</script>
<Search {search} {extractName} label="Search" placeholder="Example" />
Custom Slot
<Search
{search}
{extractName}
label="Search"
placeholder="Example"
let:item
let:extractName
let:select
>
<MenuButton on:click={() => select(item)}>
<img
src="https://api.dicebear.com/7.x/thumbs/svg?seed={extractName(item)}"
class="w-6 h-6 rounded-full"
/>
{extractName(item)}
</MenuButton>
</Search>