svelte-typeahead

[![NPM][npm]][npm-url]

> Accessible, fuzzy search typeahead component.

This component uses the lightweight fuzzy library for client-side, fuzzy search and follows WAI-ARIA guidelines.

Try it in the Svelte REPL.

---

Installation

``bash


npm

npm i svelte-typeahead

pnpm

pnpm i svelte-typeahead

Yarn

yarn add svelte-typeahead

Bun

bun add svelte-typeahead
`

Usage

$3

Pass an array of objects to the data prop. Use the extract prop to specify the value to search on.

`svelte



`

$3

$$restProps are forwarded to svelte-search.

Use the label prop to specify a custom label.

`svelte

`

$3

Set hideLabel to true to visually hide the label.

It's recommended that you set the label – even if hidden – for accessibility.

`svelte

`

$3

This component uses the fuzzy library to highlight matching characters with the mark element.

Use the default slot to render custom results.

`svelte

{@html result.string}
{index}

`

$3

Use the "no-results" slot to render a message if the search value does not yield results.

`svelte


No results found for "{value}"


`

$3

Use the limit prop to specify the maximum number of results to display. The default is Infinity.

`svelte

`

$3

Disable items using the disable filter. Disabled items are not selectable or navigable by keyboard.

In the following example, items with a state value containing "Carolina" are disabled.

`svelte
{data}
value="ca"
extract={(item) => item.state}
disable={(item) => /Carolina/.test(item.state)}
/>
`

$3

Set focusAfterSelect to true to re-focus the search input after selecting a result.

`svelte

`

$3

By default, the dropdown will be shown if the value has results.

Set showDropdownOnFocus to true to only show the dropdown when the search input is focused.

`svelte

`

$3

By default, no results are shown if an empty input (i.e., value="") is focused.

Set showAllResultsOnFocus to true for all results to be shown when an empty input is focused.

`svelte

`

$3

Note: this component is minimally styled by design. You can target the component using the [data-svelte-typeahead] selector.

`css
:global([data-svelte-typeahead]) {
margin: 1rem;
}
`

API

$3

| Name | Type | Default value | Description |
| :-------------------- | :------------------------------------------------------------------------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------ |
| value | string | "" | Input search value. |
| data | TItem[] | [] | Items to search. |
| extract | (TItem) => any | (item) => item | Target the value if TItem is an object. |
| disable | (TItem) => boolean | (item) => false | Disabled items are shown in results but are not selectable. |
| filter | (TItem) => boolean | (item) => false | Filtered out items will not be displayed in the results. |
| autoselect | boolean | true | Whether to automatically select the first result. |
| inputAfterSelect | "update" \| "clear" \| "keep" | "update" | Set to "clear" to clear the value after selecting a result. Set to "keep" to keep the search field unchanged after a selection. |
| results | FuzzyResult[] | [] | Raw fuzzy results from the fuzzy module |
| focusAfterSelect | boolean | false | Set to true to re-focus the input after selecting a result. |
| showDropdownOnFocus | boolean | false | Set to true to only show results when the input is focused. |
| showAllResultsOnFocus | boolean | false | Set to true for all results to be shown when an empty input is focused. |
| limit | number | Infinity | Specify the maximum number of results to display. |
| ...$$restProps | (forwarded to svelte-search) | N/A | All other props are forwarded to the input element. |

$3

- on:select: dispatched when selecting a result
- on:clear: dispatched when clearing the input field

`svelte


{data}
{extract}
on:select={({ detail }) => (e = [...e, { event: "select", detail }])}
on:clear={() => (e = [...e, { event: "clear" }])}
/>

{JSON.stringify(e, null, 2)}


``

$3

The following events are forwarded to the svelte-search component.

- on:type
- on:input
- on:change
- on:focus
- on:clear
- on:blur
- on:keydown

Changelog

Changelog

License

MIT

[npm]: https://img.shields.io/npm/v/svelte-typeahead.svg?color=%23ff3e00&style=for-the-badge
[npm-url]: https://npmjs.com/package/svelte-typeahead