[DHTML Style Guide] auto-complete widget proposal

My interpretation of an auto-complete widget is some type of a combo-box 
where the choices offered are filtered by the information typed into the 
box.  An editable auto-complete allows choices that are not in the list to 
be entered. An example of an editable auto-complete is the URL field in 
the browsers. 

With focus in the textbox portion of the widget the user may:
- Click in the empty text box or on an associated icon display the entire 
list of choices in a drop-down. Most auto-complete widgets will have an 
arrow or icon associated with the textbox.

-press the up or down arrow or alt+down or alt+up arrow to display the 
list of choices - focus remains in the textbox and no choice is 
highlighted. Press the down arrow to highlight the first choice in the 
list; press the up arrow to highlight the last choice in the list.  Press 
the arrow keys to reach the desired choice in the list.  Or, move the 
mouse pointer over and item in the list to highlight it. The highlighted 
choice is displayed in the textbox.  Press enter or click on the 
highlighted choice to select it.

-type a letter. If any of the available choices begin with the letter 
typed, those choices are displayed in a drop down.  Pressing the down 
arrow highlights the first choice in the list, pressing the up arrow 
highlights the last choice in the list.  The user may move the mouse 
pointer over the items in the list to highlight a choice.  The highlighted 
choice is displayed in the text box. The user presses enter or clicks on a 
choice to select a highlighted choice.  Once a choice is selected (via 
enter or mouse click) the drop down list of choices is closed and the 
selected choice is displayed in the textbox. 

-type several letters.  As the user types letters the list of choices is 
filtered so that only those that begin with the typed letters are 
displayed.  Until the user presses the arrow keys or uses the mouse 
pointer to highlight a particular choice, only the typed letters are 
displayed in the textbox. In an editable auto-complete, If there are no 
choices that match the letter(s) typed, the drop down list of choices is 
closed. In a non-editable auto-complete any letters which do not result in 
a match from the list are ignored, the drop down list of choices remains 
static until the user presses escape to clear the text field, backspaces 
to remove some of the letters previously typed, or types an additional 
letter that results in a valid list of choices.

-press escape.  If there is no text in the textbox, pressing escape does 
nothing.   With text in the textbox (either typed directly by the user or 
via highlighting a choice from the drop down) pressing escape clears the 
text in the textbox.  In an editable auto-complete, if the list of choices 
was open, it is closed. For an auto-complete that is not editable, the 
user must make some selection.  In this case pressing escape may display 
the entire list of choices via the drop down, invoke an error, or return 
the field to a default value (which could also be the behavior of an 
editable auto-complete).
 

Becky Gibson
Web Accessibility Architect
                                                       
IBM Emerging Internet Technologies
5 Technology Park Drive
Westford, MA 01886
Voice: 978 399-6101; t/l 333-6101
Email: gibsonb@us.ibm.com
blog: WebA11y

Received on Tuesday, 25 March 2008 12:41:48 UTC