The Autocomplete UI Pattern
The autocomplete 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.
Autocomplete 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.
Autocomplete 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.
