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