Autocomplete

Adds typeahead/filtering capability to a combobox.
Search autocomplete

Introduction

Auto-complete adds additional behaviour to the combobox pattern. The textbox can autofill via one or more suggested values. The suggested value may appear inside the combobox, in a list, or both.

Examples of auto-complete are the URL bar in browsers, and the main search field in search engines.

Terminology

  • autocomplete: the pattern as a while, comprised of the following sub-parts

  • combobox: enhanced textbox

  • textbox: stores the form value. Can be editable or readonly.

  • suggestion: the inline suggestion that appears directly after user entered text (optional)

  • listbox: overlay containing list of options (optional)

  • button: expands or collapses the listbox overlay (optional)

  • collapsed/expanded: visible state of listbox overlay

Working Examples

You can take a look at the autocomplete pattern in action on our examples site.

Best Practices

A combobox is an enhancement of textbox. Likewise, autocomplete is an enhancement of combobox.

Autocomplete should gracefully degrade to combobox behaviour. Likewise, combobox should always gracefully degrade to textbox behaviour.

Autocomplete comes in 3 types: "list", "inline" or "both".

Interaction Design

This section provides pattern interaction designs for different user and input types.

Keyboard

For type "list":

Autocomplete keyboard focus can appear to be in two places at the same time (the textbox and a listbox). In actual fact, keyboard focus always stays on the textbox. The aria-activedescendant property controls the pseudo-focus inside of a listbox.

With focus in the empty combobox, type any letter. If any of the available choices begin with the letter typed, those choices appear in a flyout. Any subsequent text input will further filter the list of suggestions. If the value does not match any of the available choices the list is not displayed.

With the listbox visible, up and down arrow keys will navigate the options. The textbox value will always reflect the highlighted option.

For type "inline":

This section is under development.

For type "both":

This section is under development.

Screen Reader

This section is under development.

Developer Guide

Autocomplete is an extension of the combobox pattern.

This section is under development.

FAQ

Why is role=application used?

The listbox role does not seem to trigger application mode in JAWS. For this reason we force the application mode by applying the role to the root element (note: we need to re-evaluate whether this requirement is still necessary).

How is this different from a combobox?

There are two differences:

  1. for "inline" type, the listbox is removed. Instead the combobox value will update as the user types

  2. for "list" type the listbox remains but the values are filtered as the user types.

‚Äč