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

Demo code

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.