Simply Svelte Autocomplete
A lightweight, zero-dependency typeahead component that supports theming and incorporating new entries. Built with SvelteJS
Simply Svelte Autocomplete
A lightweight, zero-dependency component that supports theming and incorporating new entries. Built with SvelteJS and a11y in mind ❤️
Demo
Check out the live demo at simply-svelte-autocomplete.surge.sh
Installation
npm install simply-svelte-autocomplete
Usage
import AutoComplete from 'simply-svelte-autocomplete'
let options = ['Jorge Luis Borges', 'Voltaire', 'Oscar Wilde', 'Julio Cortazar', 'T.S. Eliot']
const handleSubmit = () => { ... }
<Autocomplete {options} onSubmit={handleSubmit} />
Options
| Prop | Type | Default | Description |
|---|---|---|---|
| options | Array | [] | List of autocomplete results to display |
| searchModifiers | Array | [] | Used to restrict searches to a specific category |
| className | String | '' | Container class |
| onSubmit | Function | () => {} | Called upon clicking an autocomplete result or hitting the Enter key |
| themeColor | String | '#333' | Color of chevron icon and highlight background |
| highlightTextColor | String | '#FFF' | Highlight text color |
| keepValueOnSubmit | Boolean | false | Whether to keep the value instead of clearing it when clicking on a result or hitting the Enter key |
Note: options and searchModifiers only accept strings. This is simply svelte, with a side of simple.
Bindables
| Prop | Type | Default | Description |
|---|---|---|---|
| selectedValue | String | '' | The current raw value written in the input |
a11y (accessibility)
Though the component includes ARIA information, tabbed result navigation needs to be implemented for the component to be truly accessible.
Running Locally
To run this app locally, clone this repository and run npm run dev
Tests
This component is tested with Jest. To run tests, run npm test
Contributing
Contributions are always welcome! Open a pull request or file an issue.
