Auto-Complete Illustrations

Updated August 2010

For illustration, in the example below, the user has entered "Wood" into a field expecting a city name, but then paused, resulting in the auto-completion list containing cities whose names start with those characters:

The above example illustrates the possibility of the dropdown list containing additional information-only columns, in this case the zip codes. It also illustrates the possibility of making the dropdown list a different width than the field. (See the discussion of coldef for details.)

Once the list is displayed, the user can either select one of the choices from the list, either with the mouse or by using the Down-arrow / Up-arrow and Enter, or just continue typing, as in the example below (adding an "s" and then pausing again):

To complete our example, let’s assume that the user spotted the intended city, "Woods Hole", in the list and decides that it is easier to arrow down to it than to type the remaining characters:

Hitting Enter at that point closes the list and puts the selected item into the field: