Accessible, fuzzy search typeahead component.
This component uses the lightweight fuzzy library for typeahead and follows WAI-ARIA guidelines.
Try it in the Svelte REPL.
yarn add -D svelte-typeahead
<script>
import Typeahead from "svelte-typeahead";
const data = [
{ state: "California" },
{ state: "North Carolina" },
{ state: "South Carolina" },
];
</script>
<Typeahead {data} extract={item => item.state} />
By default, this component uses the fuzzy
library to higlight matching characters with the mark
element.
Use a slot to render custom results.
<Typeahead {data} extract={item => item.state} let:result>
<div>{@html result.string}</div>
</Typeahead>
Prop name | Value |
---|---|
value | string (default: "" ) |
data | T[] (default: [] ) |
extract | (T) => T |
autoselect | boolean (default: true ) |
...$$restProps |
(forwarded to Search component) |
Event name | Description |
---|---|
on:select |
triggered based on the dropdown selection |
The following events are forwarded to the underlying Search input element:
- on:input
- on:change
- on:focus
- on:clear
- on:blur
- on:keydown