Home

Awesome

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

PropTypeDefaultDescription
optionsArray[]List of autocomplete results to display
searchModifiersArray[]Used to restrict searches to a specific category
classNameString''Container class
onSubmitFunction() => {}Called upon clicking an autocomplete result or hitting the Enter key
themeColorString'#333'Color of chevron icon and highlight background
highlightTextColorString'#FFF'Highlight text color
keepValueOnSubmitBooleanfalseWhether 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

PropTypeDefaultDescription
selectedValueString''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.