Editable Combobox With List Autocomplete Example
The below combobox for choosing the name of a US state or territory demonstrates the ARIA design pattern for combobox. The design pattern describes four types of autocomplete behavior. This example illustrates the autocomplete behavior known as list autocomplete with manual selection. If the user types one or more characters in the edit box and the typed characters match the beginning of the name of one or more states or territories, a listbox popup appears containing the matching names. When the listbox appears, a suggested name is not automatically selected. Thus, after typing, if the user tabs or clicks out of the combobox without choosing a value from the listbox, the typed string becomes the value of the combobox. Note that this implementation enables users to input the name of a state or territory, but it does not prevent input of any other arbitrary value.
Similar examples include:
- Editable Combobox with Both List and Inline Autocomplete: An editable combobox that demonstrates the autocomplete behavior known as
list with inline autocomplete.
- Editable Combobox Without Autocomplete: An editable combobox that demonstrates the behavior associated with
- Editable Combobox with Grid Popup: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.
- American Samoa
- District of Columbia
- New Hampshire
- New Jersey
- New Mexico
- New York
- North Carolina
- North Dakota
- Northern Marianas Islands
- Puerto Rico
- Rhode Island
- South Carolina
- South Dakota
- Virgin Islands
- West Virginia
The example combobox on this page implements the following keyboard interface. Other variations and options for the keyboard interface are described in the Keyboard Interaction section of the combobox design pattern.
|Enter||Closes the listbox.|
|Standard single line text editing keys||
NOTE: When visual focus is in the listbox, DOM focus remains on the textbox and the value of
aria-activedescendant on the textbox is set to a value that refers to the listbox option that is visually indicated as focused.
Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator.
For more information about this focus management technique, see
Using aria-activedescendant to Manage Focus.
|Right Arrow||Moves visual focus to the textbox and moves the editing cursor one character to the right.|
|Left Arrow||Moves visual focus to the textbox and moves the editing cursor one character to the left.|
|Home||Moves visual focus to the textbox and places the editing cursor at the beginning of the field.|
|End||Moves visual focus to the textbox and places the editing cursor at the end of the field.|
Role, Property, State, and Tabindex Attributes
The example combobox on this page implements the following ARIA roles, states, and properties. Information about other ways of applying ARIA roles, states, and properties is available in the Roles, States, and Properties section of the combobox design pattern.
||Identifies the input as a combobox.|
||Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions are related to the string that is present in the textbox.|
||Identifies the element that serves as the popup.|
||Indicates that the popup element is not displayed.|
||Indicates that the popup element is displayed.|
||Provides a label for the