The Auto Complete UI Pattern

Gmail employs auto complete when a user picks a contact to send an email.

The auto complete design pattern makes selecting from a large dataset fast and easy. It works by presenting a list of items that relate to what a user types inside an input box. The first matched item in the list is highlighted and can be selected if the user hits enter or tab. The user can choose any item in the list by clicking/tapping or using the up and down arrows on a keyboard and then hitting enter or tab.

The characters that match each item in the list should be presented in bold so a user can visualize the connection between what he types and the suggested results. This interaction will help the user narrow in on the right selection.

Auto complete should be incorporated when there is a large set of data in which users pick a specific item(s) to populate an input field(s). Incorporating this pattern will speed up the selection process and improve accuracy.

Auto complete is a great alternative to a drop-down list, which can become cumbersome after 20 fields. It is also much faster than making the user type in the whole input.