Accessible Autocomplete Examples

A flexible, accessible, touch-enabled, progressive enhancement autocomplete library written in Vanilla JavaScript.

Basic

Select your country

`{ minLength: 2 }`

Select your country

`{ displayMenu: 'overlay' }`

Select your country

`{ autoselect: true }`

Select your country

`{ defaultValue: 'Germany' }`

Select your country

`{ confirmOnBlur: false }`

Select your country

`{ placeholder: 'Search for a country' }`

Select your country

`{ showNoOptionsFound: false }`

Select your country

`{ showAllValues: true }`

Select your country

`{ showAllValues: true, dropdownArrow: () => '' }`

Select your country

Advanced Usages

Progressive enhancement

Uses accessibleAutocomplete.enhanceSelectElement.

Select your country

Custom results

Uses the { templates: { inputValue, suggestion } } options.

Select your country

Translating texts

Uses the { tStatusQueryTooShort: (minQueryLength) => '', tStatusNoResults: () => '', tStatusSelectedOption: (selectedOption, length) => '', tStatusResults: () => '' } options.

Select your country