Build a pattern library - help your team create better user interfaces! Take the tour or sign up for free.

Autocomplete

Also known as: Autocompletion, Auto-complete, Continuous Filter, Entry Suggestions, Inline Suggestions, Live Search, Type Ahead

Tags: actions, forms, selection

Autocomplete helps the user to provide valid answers. As the user types into a text box, a list of matching answers is shown in a drop-down menu below the text box. The user can then choose the correct item from the list instead of typing the whole answer.

Travelstart uses Autocomplete to help travelers to find an airport. As the user types, he is provided with a list of airports that match what the user has typed. The first suggestion is the closest match and is highlighted. It can be accepted by hitting “Enter” or “Tab” key.
Source: http://www.travelstart.co.za/

Travelstart uses Autocomplete to help travelers to find an airport. As the user types, he is provided with a list of airports that match what the user has typed. The first suggestion is the closest match and is highlighted. It can be accepted by hitting “Enter” or “Tab” key.

What problem does the pattern solve?

  • The possible answers are long and hard to remember or type (like airport codes and URLs).
  • The answer can be entered in multiple ways (San Francisco International Airport or SFO)
  • There is a limited set of answers that are valid, but the whole set is too large to be displayed in a drop-down menu or a list box.
  • It is possible to make a reasonable guess of what the user will type.
  • Speed and accuracy of answer is important.

When to use it?

  • The possible answers are long and hard to remember or type (like airport codes and URLs).
  • The answer can be entered in multiple ways (San Francisco International Airport or SFO)
  • There is a limited set of answers that are valid, but the whole set is too large to be displayed in a drop-down menu or a list box.
  • It is possible to make a reasonable guess of what the user will type.
  • Speed and accuracy of answer is important.

How to use it?

Layout

  • Use a standard text box for input.
  • Label the text box to match the user’s expectation of what field will be searched against.

Interaction

  • As the user types, display a list of suggested items that most closely match what the user has typed. Continue to narrow or broaden the list of suggested items based on the user’s input.
  • Display the suggested items list in a drop down box directly underneath the text box. The suggested items list may be based on the complete set of data or more narrowly based on other criteria such as each item’s frequency of use.
  • When available, show multiple fields of information for each suggested item. In the Travelstart example above, three fields are presented: the airport name, country, and the airport code.
  • Highlight the closest matching item within the suggested items list.
    • Show the matched item as first in the list.
    • Highlight the background of the matched item.
    • When multiple fields are shown for each suggested item the match may occur with the initial characters of any of the fields presented.
  • For each suggested item in the suggest items list show the characters that exactly match the user’s input. When multiple fields are shown in a suggested item the matching characters may appear in any of the fields presented. In the example below, the user has typed the characters “aap”. The match is on ten items. Notice that the third item matched on the quote’s name “ML AAPL STRIDES” whereas the other items are matched on the ticker symbol (e.g., “AAPL”).


Search quotes

  • Allow the user to delete a character of input and display the previous suggested items list.
  • Allow the user to complete the input field by pressing the Tab key or Enter key. The current matched item in the suggested items list will be accepted as the value for the input field.
  • Allow the user to optionally highlight an item of their choice from the suggested item list with the mouse or with the up and down arrow keys.
  • Allow the user to cancel the suggested items list by pressing the Esc key. The drop down list will close. Subsequently pressing the Tab key or Enter key will accept the value from the input field. However, typing more characters after hitting the Esc key will restart the auto completion behavior displaying the suggested items list.
  • If multiple input items are allowed in a single input field, allow the user to use the Comma key to separate each input item.
    • Pressing the comma key will complete an individual item match.
    • The auto complete behavior restarts when the user begins typing characters for the next input item.

Why to use it?

  • Helps the user to provide the right answer faster and without typographical errors. He needs to remember only part of the answer.
  • Showing additional information in the list of valid answers removes ambiguity (like the airport code and city in the example above).
  • Continuous feedback helps the user narrow in on the correct choice.

Accessibility

  • Label the text box to match the user’s exceptions of what field will be searched against.
  • Allow the user to highlight a desired match either using a mouse or navigating to it with the up or down arrow keys.
  • Allow the user to complete the form by pressing the Tab or Enter keys.
  • Allow the user to cancel suggestions by pressing the Esc key.
  • Allow the input field to receive keyboard focus by pressing the Tab key.
  • Once the edit field is in focus make sure that the focus stays in the edit field during autocomplete.
  • Do not send any page refreshes when updating the field (page refreshes will signal assistive technology to start reading the page again.)
  • The insertion cursor should move as the left/right arrow keys are pressed in the text field.

Sources

This pattern is based on the “Auto Complete” pattern from Open Design Patterns.

+ Add

Useful linksUseful links icon

+ Add

Code snippetsCode snippets icon

+ Add

Example Images (1 example)

Comments