Last updated: September 14, 2015 at 20:17 pm

As the user begins entering text, a select list containing suggested terms will drop down. The user merely clicks the desired term, the drop down vanishes, and the search field is populated.

Visual example of the element:

What problem does this element or pattern solve?
To speed up input and minimize data entry errors when using open text fields, particularly on mobile devices, auto-suggest can be a valuable feature to include on your forms.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • There is huge potential for internal vocabulary confusion surrounding the terms auto-suggest, auto-complete, and auto-fill. The latter are often used to describe a browser setting which automatically populates multiple fields with saved data (such as complete shipping addresses). In order to avoid misunderstandings, use this area to clearly differentiate which term is used to describe which behavior.
  • When presenting your suggested responses, must the user physically click or touch the preferred response from a select list? Or will suggestions be made with ghost text as the user types?
  • If the user makes an apparent spelling error, will the application make an automatic correction (i.e. iPhone Auto- Correct)? Can the user disable this feature?
  • Are your auto-suggest behaviors different for desktop and mobile devices?

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
auto-fill, suggested items, suggested terms, auto-complete, autofill, autocomplete, autocorrect
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)

Owners and governance
UX or design 0wner
John Designowner
Business or marketing owner
Mary Businessowner
Development owner
Mike Devowner

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply