Typeahead

Joule / Patterns / Typeahead

Intro

Typeahead assists users by offering real-time query suggestions above the input field as users begin typing. These suggestions dynamically update with each keystroke, providing relevant recommendations to help complete queries.

Joule typeahead view in compact Joule panel (left) and expanded Joule panel (right)

Usage

Do

  • Use typeahead only on the welcome screen, during the first prompt of each new conversation.
  • Show suggestions on the welcome screen above the input field to avoid obstructing the input field area below.
  • Apply a blurred background with slight opacity behind the suggestions to ensure the welcome message does not obstruct the user’s view of the typeahead.
  • Highlight the suggested part of the typeahead.
  • Limit suggestions to a maximum of three options to avoid overwhelming the user.
  • Prefix each suggestion with an ellipsis once the suggestion becomes longer than one line in length.

Don't

  • Don't show suggestions when the input field is empty — suggestions should always relate to what the user has started typing.
  • Don't auto-insert a suggestion without an explicit tap of the insert from the user.
  • Don't show more than three suggestions at once to avoid overwhelming the user.
  • Don’t present the typeahead suggestions for prompts outside of the welcome screen.
If no typeahead suggestions can be generated for the current input, collapse the suggestion surface entirely rather than showing empty rows.

Anatomy

A. Typeahead Container

Shows a list of three typeahead suggestions to guide the user.

B. User Prompt
Shows what the user has typed.

C. Suggestion

Shows what Joule is suggesting for the user.

D. "Insert" Icon

Used for populating the input field with the typeahead suggestion.

Typeahead anatomy

Behavior and Interaction

Trigger and Update

Typeahead activates on the welcome screen as soon as the user begins typing and suggestions are available from Joule. Suggestions update dynamically with each keystroke, continuously reflecting the most relevant completions for the current input.

When all three typeahead suggestions fit within a single line, each row displays the user’s typed input followed by the suggestion. If any typeahead suggestions extends beyond one line, the user’s typed input is replaced with an ellipsis across all three suggestions to preserve a clean, consistent, and readable layout.

Typeahead activated on the welcome screen and suggestions truncate when they get too long

Tapping on text

When the user taps a typeahead suggestion text the suggestion is sent directly and a new conversation is initiated in the conversation thread.

Tapping on the text

Tapping on icon

When the user taps on the "Insert" icon the typeahead suggestion populates in the input-field, allowing the user to edit the prompt before sending.

Tapping on icon

Adaptive Design

The width of the typeahead is determined by the panel width.

Joule typeahead view in compact Joule panel (left) and expanded Joule panel (right)

Resources

Joule for iOS: Typeahead