Accessible Autocomplete examples

Example in a real HTML form that you can submit

Options

{ element, id, source }

This illustrates usage with only the required arguments.

{ minLength: 2 }

This option will prevent displaying suggestions if less than 2 characters are typed in.

{ displayMenu: 'overlay' }

This option will display the menu as an absolutely positioned overlay.

{ autoselect: true }

This option will automatically select the first suggestion.

{ defaultValue: 'Germany' }

This option will prefill the input with a value.

{ confirmOnBlur: false }

This option will toggle automatically confirming a selection on blur. In the other examples, if you select an option using the arrow keys and then click out, it will confirm the selection.

{ placeholder: 'Search for a country' }

This option will populate the placeholder attribute on the input element.

{ showNoOptionsFound: false }

This option will toggle displaying the "No results found" message.

{ showAllValues: true }

This option will toggle showing all values when the input is clicked, like a default dropdown.

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

When showAllValues is true a dropdown arrow will be displayed. It can be customized using a function that receives a `{ className: string }` object and returns a string or (P)React component.

{ inputClasses: 'app-input'}

The classes provided in inputClasses are added to the component's <input>.

{ hintClasses: 'app-hint'}

The classes provided in hintClasses are added to the component's hint that appears when the value matches the start of a suggestion.

{ menuClasses: 'custom-menu-class'}

The classes provided in menuClasses are added to the menu displaying the suggestions.

Advanced features

Progressive enhancement

This example demonstrates how to turn a server-rendered <select> element into a autocomplete. Turn off JavaScript to see the <select> element.

Uses accessibleAutocomplete.enhanceSelectElement.

Custom results

This example demonstrates how to allow users to search for a country by either:

• its English name
• the name by which a group of people refer to their country

The suggestions are user-defined objects and they are displayed using a user-defined template. Confirming a suggestion will populate the input with the English country name.

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

Translating texts

This example demonstrates how to translate the texts emitted by the component.

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