Accessible Typeahead 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.
{ selectOnBlur: 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 options found" message.
Advanced features
Progressive enhancement
This example demonstrates how to turn a server-rendered <select>
element
into a typeahead. Turn off JavaScript to see the <select>
element.
Uses accessibleTypeahead.enhanceSelectElement
.
Custom results
This example demonstrates how to allow users to search for a country by either its english name or its endonym. 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.