How can I make an autocomplete field usable with a keyboard?

Describe actions and resulting states. Keep the input text, popup visibility, and active or selected suggestion distinct. The WAI-ARIA Authoring Practices Guide (APG) describes editable combobox patterns with suggestions; in its listbox-popup pattern, Down Arrow enters the suggestions and Up/Down move among options. [S1]

A starting specification:

1. Typing edits the input and updates suggestions according to the product’s behavior.
2. Down Arrow opens or enters the list when appropriate; Up/Down move among options.
3. Enter accepts the active suggestion and puts its value in the input.
4. Escape dismisses the popup and returns interaction to the input without necessarily changing its prior value.
5. Printable characters return interaction to the editable input so typing can continue. [S1]

Choose and document whether the field uses manual selection, automatic selection, or inline completion. The APG describes these patterns but doesn’t determine which suits your product. [S1]

Treat them as separate states. The input value is the text currently displayed or edited. The active suggestion is the option keyboard navigation has reached; it isn’t necessarily committed to the input. Acceptance is the action that puts the chosen option’s value in the input. The APG distinguishes the input value, popup visibility, and active or selected suggestion through combobox states and properties. [S1]

For example, if the person types san and Down Arrow moves to San Francisco, describe san as the input value and San Francisco as the active option—not an accepted value. When Enter is pressed, the input becomes San Francisco. Specify what happens to the popup afterward; that detail is a product choice.

Make the active option distinguishable from the others, and state whether text is typed, completed inline, or accepted. Don’t promise how every assistive technology will present the interaction.

Specify both as routes back to editing, including what happens to the text. In the APG listbox-popup pattern, Escape dismisses the popup and returns to the input without necessarily changing its prior value. Printable characters can return interaction to the editable input so the person can continue typing. [S1]

For example: “While suggestions are open, Escape closes the popup and leaves the input unchanged. Typing a printable character resumes editing; suggestions update according to the field’s defined behavior. Enter accepts the active option and puts its value in the input.” Replace the update phrase with your actual rule. Test Escape with an active option and with none active, checking the input afterward.

Record the starting input text, popup state, active option, key pressed, and expected result. For example: “Input san; popup open; San Francisco active; press Enter; input becomes San Francisco; verify the documented popup result.” Then test these paths:

1. With text and a closed popup, press Down Arrow. Check the documented opening or entry behavior and active option.
2. With several options open, press Down Arrow and Up Arrow. Check movement and confirm that moving alone doesn’t change the input value.
3. With an option active, press Enter. Check that its value appears in the input.
4. With the popup open, press Escape. Check that it closes and that the input behaves as specified.
5. With the popup open, type a character. Check the input and suggestions against your update rule.
6. Repeat with no suggestions and with no active option; document the expected behavior.

These are proposed checks, not test results. The APG describes patterns, not a guarantee that a particular field, browser, or assistive-technology combination passes them. [S1]