Text Field Autocompletion

Problem

The user needs to enter a hard to remember text, from which the application knows a list of possible values.

Solution

As the user types into a text field, anticipate the possible answers and automatically complete the entry when appropriate.

Context

There are two key scenarios for this pattern:

• You have a text field where the user can type any value. A list of possible values is known, but the value you type does not need to be on that list. This is usually the case of URLs, email addresses, or a filename. You can make a reasonable guess as to what they're attempting to type perhaps there's a saved history of things this user has previously typed, for instance, or perhaps the user is picking from a set of preexisting values, like a list of filenames.
• You have a text field where the user needs to select a value from a list, but the number of possible values is too large for a drop down list. This is usually the case when the field points to a record in a database.

In both cases you could need to enter one value or multiple values. This is very common adding “tags” to content like blog posts or videos.

Rationale

Users are familiar with auto-complete selections in web browser address lines.

As autocompleting a value allows to reduce the number of keystrokes, it allows faster input. It prevents typing errors, and let users get feedback that what they are entering is valid.

It allows the designer to include a long list without taking up much screen real estate.

Implementation

• With each additional character that the user types, the software quietly forms a list of the possible completions to that partially entered string. If the user enters one of a limited number of possible valid values, use that set of valid values. If the possible values are wide open, then one of these might supply completions:
• Previous entries typed by this user, stored in a preferences or history mechanism
• Common phrases that many users have used in the past, supplied as a built-in "dictionary" for the application
• Artifacts appropriate to the context, such as company-wide contact lists for internal email
• You can show the list after the user entered one character, or you can wait until a minimum number have been entered.
• Make sure that Autocompletion doesn't irritate users. If you guess wrong, the user won't like it then has to go erase the autocompletion, and retype what he meant in the first place, avoiding having autocomplete pick the wrong completion yet again. These interaction details can help prevent irritation:
• Don't interfere with ordinary typing. If the user intends to type a certain string and just keeps typing in spite of the attempts at autocompletion, make sure that the result is what the user intended to type.
• If the user keeps rejecting a certain autocompletion in one place, don't keep offering it. Let it go at some point.
• If you can build the value list, try to create a list that is sufficiently different within a few characters to require only a few characters input before it is clear which item they should choose.
• When available, show multiple fields of information for each suggested item. For example, in a list of email addresses, show the contact's full name and the contact's email address.
• Highlight the closest matching item within the suggested items list.
• Show the matched item as first in the list.
• Highlight the background of the matched item.
• When multiple fields are shown for each suggested item the match may occur with the initial characters of any of the fields presented.
• For each suggested item in the suggest items list show the characters that exactly match the user's input. When multiple fields are shown in a suggested item the matching characters may appear in any of the fields presented. In the example below, the characters 'Yu' have been typed by the user. The match is on three items. Notice that the first item matched on the contact's email address '<yuiblogger.com>' whereas the second and third items are matched on the contact's name (e.g., 'Yusef Jones'.)
  
• Allow the user to delete a character of input and display the previous suggested items list.
• Allow the user to complete the input field by pressing the Tab key or Enter; key. The current matched item in the suggested items list will be accepted as the value for the input field.
• Allow the user to optionally highlight an item of their choice from the suggested item list with the mouse or with the up and down arrow keys.
• Allow the user to cancel the suggested items list by pressing the Esc key. The drop down list will close. Subsequently pressing the Tab key or Enter key will accept the value from the input field. However, typing more characters after hitting the Esc key will restart the auto completion behavior displaying the suggested items list.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Text Field Autocompletion is implemented in the following ASP.NET control: WebDropDown Check out the samples browser to see it in action.

Windows Forms

You can use the NetAdvantage for Windows Forms controls: WinCombo and WinComboEditor with the AutoComplete functionality enabled to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called AutoComplete to see it in action.

 Accessibility

• Label the text box to match the user's expectation of what field will be searched against.
• Allow the user to highlight a desired match either using a mouse or navigating to it with the up or down arrow keys.
• Allow the user to complete the form by pressing the Tab or Enter keys.
• Allow the user to cancel suggestions by pressing the Esc key.
• Allow the input field to receive keyboard focus by pressing the Tab key.
• Once the edit field is in focus make sure that the focus stays in the edit field during autocomplete.
• When doing web applications, do not send any page refreshes when updating the field (page refreshes will signal assistive technology to start reading the page again.)
• The insertion cursor should move as the left/right arrow keys are pressed in the text field.

Sources

Jennifer Tidwell, Designing Interfaces

Yahoo Design Pattern Library, Autocomplete

UC Berkeley Web Patterns, Auto-complete

Tags

Data Entry.