Autocomplete

Adds typeahead and/or filtering capability to a combobox.
Search autocomplete

Introduction

Autocomplete adds additional behaviour to the combobox pattern. Suggestions provided will update dynamically based on user input. The suggested values may appear inline within the textbox, in a list, or both places at once.

Examples of autocomplete are the URL bar in browsers, and the main search field in search engines.

Updated: Feb 19th, 2021 (configuration section)

Terminology

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

  • filter: the filtering criteria

  • combobox: enhanced textbox

  • textbox: stores the form value.

  • flyout: an overlay that contains a listbox

  • listbox: contains list of options

  • option/suggestion: a suggestion inside of the listbox and/or directly after the textbox value

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

  • collapsed/expanded: visible state of listbox overlay

Working Examples

Experience the pattern in action on our companion eBay MIND Patterns examples website.

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 gracefully degrade to textbox behaviour.

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

Configuration

  • autoSelect: for keyboard users, autocompletion of text can either be "manual" (requires ENTER key) or "auto" (recommended)

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 (so that a user can type, of course). The aria-activedescendant property controls the pseudo-focus inside of the listbox.

With focus in the empty combobox, type any letter. Any suggestions that match the filter will appear as options in the listbox flyout.

With the listbox visible, up and down arrow keys will navigate pseudo-focus through the options. For "automatic" selection (recommended), the textbox value will always reflect the highlighted option. For "manual" selection, the user must press ENTER to update the textbox value with the highlighted option (and another ENTER key press to trigger form submit, if relevant).

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

How is this different from a combobox?

There are two differences:

  1. for "inline" type, the listbox is removed. The entire combobox value will update as the user types, with the suggested portion highlighted as a selection range.

  2. for "list" type the listbox remains but the options change based on the custom filtering criteria.

‚Äč