Autocomplete

Problem

The user wants to enter a label that is part of a large set

Solution

Suggest possible label names as users are typing

From

Use when

Naturally, autocomplete is always part of a Form. Usually as part of a Search Box or web-based email editors. It is also often used by Airline booking pages where the destination needs to be selected. In all cases, the set of possible values and the potential values can help the user to do their task quicker.

How

As soon as the users have entered the first character, the application starts creating matches with the whole set. Those matches are then directly shown underneath the edit box. The user can select the desired value once it has been spotted by using the cursor and enter keys.

Why

Instead of having to rely on memory entirely, autocomplete helps users to locate the desired item in less steps than would be needed to enter the entire label.

More Examples

At the , autocomplete is used when having to select the destination of a flight:


Implementation

There are various technical approaches to implement auto complete. When the set is not very large such as the case of flight destinations, the entire set can be embedded in the page code. But for very large sets such as in the Google Suggest example, server communication using AJAX is the common solution.

Also known as



Code examples


plml logo

Comments

0 comments have been added to this pattern



Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name

Comment

Enter the verification code you see in the image below
captcha