eBay

Auto-Complete

Search autocomplete

Introduction

Auto-complete adds additional behaviour to the combobox pattern. The textbox autofills with the value of the active list option. Up & down arrow keys change the active list option.

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

Note that it is also possible to have an auto-complete without a listbox, although less common. An inline auto-complete adds a suggestion after the caret as the user is typing.


Updates

  • Feb 22nd, 2016
    • Issue with Safari and Voiceover not announcing combobox options is now fixed.

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, auto-complete is an enhancement of combobox. Auto-complete should gracefully degrade to combobox behaviour. Combobox should always gracefully degrade to textbox behaviour.

We expect to have this section content complete early 2016.


Interaction Design

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

Keyboard

Auto-complete keyboard focus can appear to be in two places at the same time (the textbox and the listbox). In actual fact, keyboard focus always stays on the textbox. The aria-activedescendant property controls the pseudo-focus inside of the 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 dropdown flyout. Any subsequent text input will further filter the list of suggestions. If the value does not match any of the available choices the drop-down 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.

Screen Reader

NOTE: There is no common consensus for how auto-complete should behave in a screen reader. The behaviour we prescribe here may differ from other examples and guidelines you might see.

We expect to have this section content available early 2016.


Developer Guide

Auto-complete is an extension of the combobox pattern. Everything that applies to combobox pattern also applies to the autocomplete. The only addition here is that the value of the combobox must update as the user cycles through the available list options.


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.

How is this different from a combobox?

The only difference is that the combobox value will update as the user cycles through listbox options.

results matching ""

    No results matching ""