Synonyms: Input field with suggestion list, autocomplete search, auto suggestion box

See also: selection list , drop-down list , menu button , input field (one-line), , combined input field

Input fields with the autocomplete function allow for text to be entered freely and the selection of options from a list, whereby the list is only opened after the text has been input.

In the closed state, an input field with autocomplete function consists of a single input field. In the opened state, a selection list is displayed underneath (possibly with a scrollbar ). The options of the selection list can be grouped. The labeling of the groups cannot be selected.

Input fields with the autocomplete function can also add the first hit to the input field automatically, so that this can be adopted immediately (Inline-Autocomplete). In this case, the text cursor remains at the position of the last character entered.

Figure 41: Input field with autocomplete function

The requirements concerning the input field are described in the “input field” section. Here, only the additional requirements are described which result from the fact that it is an input field with autocomplete function.

No.PropertyDescriptionClassificationReference
617ContrastThe labeling of the options in the selection list of the autocomplete function must have a contrast of at least 4.5:1.MustEN 301 549: 9.1.4.3, 11.1.4.3
618ContrastThe selected option in the selection list of the autocomplete function must have a contrast of at least 3:1 with respect to the neighboring options.MustEN 301 549: 9.1.4.11, 11.1.4.11
619Focus visibilityIn the case of keyboard navigation through the list entries, the current option must be displayed in the visible area.MustEN 301 549: 11.2.4.7

The requirements concerning the input field are described in the “input field” section. Here, only the additional requirements are described which result from the fact that it is an input field with autocomplete function.

No.PropertyDescriptionClassificationReference
620Use of the keyboardIt must be possible to access, operate and exit the options in the selection list of the autocomplete function with the keyboard (see Use of the keyboard table, below).MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
621UpdatesWhen focusing and operating the input field with the autocomplete function, no unexpected change of context

Use of the keyboard: input field with autocomplete function

Permalink "Use of the keyboard: input field with autocomplete function"
ActionKeyClassification
Opening of the selection listText inputRequired
Closing the selection listENTER
ESC
TAB
Text input that does not lead to any results from the autocomplete function
Reauired
Operation of the selection list (selection of the previous or following value)UPP ARROW, DOWN ARROWRequired
Operation of the selection list (selection of a value before or after with a defined increment)PAGE UP, PAGE DOWN

Note: The increment should correspond to the amount of visible options.

Recommended

Use of the pointing device: input field with autocomplete function

Permalink "Use of the pointing device: input field with autocomplete function"
ActionKeyClassification
Closing the selection listLeft click on a value within the open listRequired
Closing the selection listLeft click outside the combined input field (consisting of the input field and the selection list)Required
Value selection within the selection listLeft click on a valueRequired

The requirements concerning the input field are described in the “input field” section. Here, only the additional requirements are described which result from the fact that it is an input field with autocomplete function.

No.PropertyDescriptionClassificationReference
623RoleThe input field role must be communicated to the Accessibility API (see Accessibility APIElementstatusFocus indicator

Information about this article

You are welcome to send feedback by email about our handout!