Autocomplete

Overview

An autocomplete dropdown allows the user to search and select one option from a set of choices. When the user enters text into the input field, a list of suggestions are provided.

Usage

Use when

• Searching and results can be auto-populated.
• Application requires predictive, suggestive or instant search results.
• Filtering list items.
• Single selection from a list is necessary.

Don’t use when

• Providing only two options. Instead, use Radio Buttons or a Switch.

Types

Autocomplete comes in three varieties:

• Basic Autocomplete: Typical “search-as-you-type” function that matches what a person is typing, usually the beginning of a word, or a prefix, part of a word or with a word list.
• Autocomplete Suggestions: Suggestions not only predict user intentions, but they also help users construct more useful searches than they might on their own. Suggestions go beyond matching text strings by including new search items within the suggested results. It is useful during information-seeking tasks, where there isn’t a single “right answer.”
• Instant Results: Sometimes users may prefer to autocomplete actual search results instead of retooling their search phrase. For example, the display of rich information right in the autocomplete instead of a list of suggestions that lead to a search results page.