Typeahead

What is typeahead?

Typeahead is a method of translating intention between user and software, by prompting suggestions for an input field. It's such a common feature, it's easy to overlook how often we use this in our own day-to-day interactions with technology. Most commonly used for searching, there are two basic forms of typeahead—auto-complete and auto-suggest.

Auto-complete

Returns exact query results that start with the characters typed. Dropdown options are pulled from a controlled, finite list.

Example: a list of states that begin with 'al.'


Image example of what auto-complete looks like

Auto-suggest

Guides a user by returning a list of related keywords or phrases based on the characters typed, but that don't necessarily match an exact query string.

Example: a list of names that include the letters combination 'ad.'

Image example of what auto-suggest looks like

Best practices

To ensure the best user experience possible, keep in mind the following best practices when adding typeahead to a product feature:

  • Keep the dropdown manageable and useful by trying to show seven or fewer results at once and avoiding scroll bars.
  • Bold the unique text of each dropdown item.
  • Provide suggestions when the second or third character is entered, and continue narrowing suggestions as more characters are typed.
  • Keep the dropdown and text box design clean and organized.

Styling & specs

  • Unique text font weight: 700
  • Hover color: ZUI Gray 50
  • Dropshadow
    • Color: Black at 16%
    • X-Axis: 0px
    • Y-Axis: 1px
    • Blur radius: 3px
    • Spread radius: 1px

Typeahead styling specs

All values are in pixels.

Additional display options

Depending on the context of the typeahead feature and what's technically feasible, you may want to consider using search categories or displaying a user's previous entries/searches.

Recent entries

Recently typed searches or entries are shown in a dropdown the moment the cursor is put into the search field, and disappear as the first character is typed.

Image example of what auto-complete looks like

Search categories

Using category headers, labels, or icons can help narrow down search suggestions by organizing items in the dropdown. If you decide to use search categories, remember that they are meant to consolidate results and make the list of suggestions easier to read. Labels should be concise, and icons must be clear and distinct.

Header label

  • Color: ZUI Gray 300
  • Font size: 12px
  • Font weight: 700
  • Text case: uppercase

header label

Inline label

  • Color: ZUI Gray 300
  • Font size: 12px

inline label

Icons

  • Color: ZUI Gray 300
  • Size: 16px

icon label

Behavior & interaction

Typeahead suggestions will display in a dropdown, typically after the third character is typed into the text box. Users may hover over a typeahead suggestion with their mouse, or arrow down to highlight a suggestion. To select a specific suggestion, uses may either click the suggestion with their mouse, or choose Enter when the suggestion is highlighted.

View a live example

Focused state

focused state

Hover state

hover state

Rare situations

In rare situations, you may want to consider adding additional identifying information to typeahead suggestions. For example, AMC typeahead brings back results under the traditional categories of Account and Contact, but includes the account location and contact account for each suggestion. This extra bit of information helps a user recognize and identify a suggestion more quickly and accurately.