Type-ahead is a behavior where the application suggests relevant terms as the user types in an input field. It can help the user quickly fill out a field that has a large number of potential options.
Appearance & Behavior
The application should not require that the user type the term completely accurately. For example, typing “Unitd” in a country input field should return “United States of America”. Additionally, the application should not require that the user type the term in the exact sequence. For example, typing “America” in a country input field should return “United States of America”.
An “Add New” button can be included at the top of the results list to allow the user to include custom options. For example, when categorizing expenses, the user may type “Food” into a Text Input Field and see that it does not currently exist as an option. The user can click ‘Add “Food”’ to quickly add it.
There are two Type-ahead styles – the first is used for Combo Boxes and the second is used for Text Input Fields. Both of these styles use an Overlay to display results.
Type-ahead for Combo Boxes
All Combo Boxes use Type-ahead. As the user types in the field, the application dynamically filters the list associated with the Combo Box to only show options that match the typed characters. Results are listed in alphabetical order.
For example, when selecting a state for the billing address, the user can type “Te” in the state Combo Box instead of opening the menu and scrolling to “Texas”. Using Type-ahead, the application will recommend “Tennessee” and then “Texas”.
Type-ahead for Text Input Fields
Use Type-ahead for a input field when the field could have a very large or infinite number of results or include multiple entries. For example, when composing an email, the user could address the email to anyone and may want to send it to multiple recipients.
As the user types in the field, the application searches for results that match the typed characters. Since the Type- Ahead is associated with a very large or possibly infinite result set, a maximum of seven results are displayed in an overlay beneath the field. These results are sorted by frequency of use or popularity. To narrow the results, the user can continue to type in the field.