Skip to main content

Autocomplete

Overview​

The autocomplete can be used within a multi-select component to select from a large collection of data or it can be used with a search pattern to provide suggestions and help users articulate better search queries.

Use when​

  • There are a large number of options in a dropdown.

Don't use when​

  • There are fewer than three options in a dropdown.

Types​

Autocomplete suggestions can take three forms: auto-complete, auto-suggest, and instant results.

1. Auto-complete​

Auto-complete resolves a partial query, i.e., to search within a finite list of records. With a limited set of data, a basic autocomplete can help users avoid typos, save time, and make it easier to select the record they want.

Gif of an autocomplete searching within a finite list of data.

2. Auto-suggest​

Auto-suggest allows users to search a virtually unbounded list for related keywords and phrases. This pattern actually introduces new ideas to the mix and encourages exploratory search. This pattern is better for a true search and filter pattern.

Image of an auto-suggest providing suggested searches.

3. Instant results​

Instead of providing shortcuts to suggested searches, this pattern offers a shortcut directly to the known item. Because it facilitates matching a specific record instead of a search query, it it better for cases when the user knows exactly the record they’re looking to find. (Check out the Forge search to see this in action!)

Image of an auto-suggest providing suggested searches.

States​

The autocomplete has four states: the zero input state, loading, matching, and selected.

1. Zero input state​

In the zero input state, data has not yet been entered. User placeholder text to describe the scope in which people are searching. “Search files”, “Search people.” For auto-suggest, provide a hint search. “Try “Portland.’”

Video of autocomplete zero input state with hint text "Search states..."

2. Change / loading​

Once input has been entered into the field, the component displays skeleton loading to initially load results. Once results have been initially loaded, use a linear progress indicator to indicate additional changes.

An image of an autocomplete using skeleton loading for an initial load and an autocomplete using a linear progress indicator to indicate change

1. Initial results are loaded with skeleton components.
2. Additional components are displayed with a linear progress indicator.

3. Matching​

After a query has been entered, the autocomplete displays matching data. Bold or highlight unmatched letters to provide visual weighting on the part of the result that doesn’t match what the user entered. In general, use prefix matching (matching the leading text in each word) to aid in scannability and readability.

Keep the list manageable (Baymard recommends fewer than 10 options) to improve scannability and reduce cognitive load.

Distinguish different categories with subsections or using alternate text styles.

Use sorting strategically. Results may be sorted alphabetically, bt relevance rank, by region, or by other criteria. In general, sort results alphabetically unless there is a better sort criteria for the particular business case.

Search results with multiple sections.

An autocomplete may use sections to group logical sets of results.

4. Selection​

Once an option has been selected, the suggestion list is closed. In a select, the selected option is displayed within the field. In a search setting, the user is brough to a search results or to a specific record, depending on the model used.

If an autocomplete is cleared (either by an X or by manually deleting data), close the suggestion list.

A gif of "Colorado" typed into an input, selected, and cleared.

Responsive​

  • Consider using full screen for results on mobile or native mobile.
  • Consider keyboard: ensure that any relevant info is in the top half of the screen where it won't be obscured by the keyboard.
  • Ensure font size and hit area are large enough.
  • Use text wrapping instead of ellipses to ensure that users can read all data.
  • If using scroll in mobile, provide an affordance that the list is scrollable (ie, obscure last result).

Autocomplete search results on mobile.

Best practices​

check_circle_outline

Show unmatched text with bolded text.

check_circle_outline

Generally, match leading text for words.

check_circle_outline

Support keyboard interactions (already included in the component).

cancel

Don't leave an autocomplete blank, because it's too ambiguous. Use hint text instead.

cancel

Don't use lengthy and unclear hint text. It should be used to clarify and set expectations.

cancel

Don't provide too much information in the suggestions list; it's intended to be lightweight.

Resources​

Components​

  • For an input field without suggested options, use text fields.
  • For a short list of selectable options, use the select.
  • For a short list of selectable options that optimize discoverability, use checkboxes or radio buttons.

Patterns​

  • Search (coming soon!)
  • Forms (coming soon!)
  • Use inline Progress & loading with the autocomplete