VOCABULARY / ENTRY
Autocomplete
autocomplete
While the user types, candidates matching what has been entered appear below the field: the user can pick one to complete the input, or ignore them and finish typing.
Recognizing it
- Candidates change with the input and appear in a popup list next to the field
- Candidates can be moved through and confirmed from the keyboard, or ignored entirely
- What the user typed is preserved and never overwritten by a candidate
Concept boundary
This entry means the interaction of offering candidates as the user types, not a browser or operating system filling a form from stored history — that is provided by the user agent and the author usually only declares what the field is for. The test is that the candidates come from a match and can be ignored; rewriting the input into a candidate, or refusing to submit unless one is chosen, is not completion but constrained choice and should use an explicit selection control instead. The ordering is not neutral either: it decides what users are most likely to pick, so the basis for it should be explainable.
When to consider it
- The target is hard to spell or has several spellings, and users remember it roughly
- The candidates come from data the system already holds — cities, products, tags
- A typo is costly and matching early reduces wasted submissions
When to be cautious
- There are only a few candidates, where listing them outright beats typing blind
- The value must come from a fixed set, where completion implies free text is allowed
- Candidates come from an unexplainable ranking yet are presented as objective matches
Tradeoff
It turns recall into recognition and sharply lowers typing effort and spelling errors, at the cost of the list becoming a filter of its own: whatever does not appear is assumed not to exist, while the ordering rules stay all but invisible.
Conditional rules · Editorial advice
Related entries
Completion turns recall-based typing into picking from candidates, one concrete realisation of preferring recognition over recall.
Completion speeds up reaching a known item while filtering handles results that remain too many; both usually sit on the same path.
Whatever is first is most likely to be chosen, so the basis for the order should be explainable rather than passed off as an objective result.
Sources and what they support
The pattern explains that a combobox is an input widget with an associated popup that enables users to choose a value for the input from a collection, where the popup may be a listbox, grid, tree, or dialog, and that some implementations present allowed values while others present suggested values. This entry paraphrases the widget structure from it and uses it to separate suggestion from constrained choice.
Retrieved: 2026-09-16The pattern states the problem as the user needing recognition-aided search when performing search tasks that are hard to remember or easily mistyped, and advises using it when an item can be entered in multiple ways and when what is typed can be readily matched to a specific piece of information in the system. This entry paraphrases the applicable conditions from it.
Retrieved: 2026-09-16 · Snapshot unconfirmedDefinitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.
Type extensions and implementation notes
This entry has no runnable specimen; the candidates in the illustration are fictional. Before shipping, verify keyboard operation and screen-reader announcement against the cited combobox pattern, and confirm that the raw input can still be submitted when nothing matches.
{
"states": [
"idle",
"typing",
"suggesting",
"empty",
"selected"
],
"a11y": [
"The field and the candidate list are associated and the active option is announced",
"Arrow keys move, Enter confirms, and Escape closes the list while keeping what was typed"
],
"motion": "The list appears directly with no animation, and no transition under a reduced-motion preference"
}Full Agent entry JSON
{
"id": "autocomplete",
"type": "interaction",
"name": {
"zh": "自动补全",
"en": "Autocomplete"
},
"aliases": [
"Auto Suggest",
"Typeahead",
"输入建议",
"联想输入"
],
"granularity": "component",
"intents": [
"find-item",
"prevent-error"
],
"tags": [
"input",
"suggestions",
"search",
"recognition",
"listbox"
],
"definition": "While the user types, candidates matching what has been entered appear below the field: the user can pick one to complete the input, or ignore them and finish typing.",
"boundary": "This entry means the interaction of offering candidates as the user types, not a browser or operating system filling a form from stored history — that is provided by the user agent and the author usually only declares what the field is for. The test is that the candidates come from a match and can be ignored; rewriting the input into a candidate, or refusing to submit unless one is chosen, is not completion but constrained choice and should use an explicit selection control instead. The ordering is not neutral either: it decides what users are most likely to pick, so the basis for it should be explainable.",
"signature": [
"Candidates change with the input and appear in a popup list next to the field",
"Candidates can be moved through and confirmed from the keyboard, or ignored entirely",
"What the user typed is preserved and never overwritten by a candidate"
],
"when": [
"The target is hard to spell or has several spellings, and users remember it roughly",
"The candidates come from data the system already holds — cities, products, tags",
"A typo is costly and matching early reduces wasted submissions"
],
"when_not": [
"There are only a few candidates, where listing them outright beats typing blind",
"The value must come from a fixed set, where completion implies free text is allowed",
"Candidates come from an unexplainable ranking yet are presented as objective matches"
],
"tradeoff": "It turns recall into recognition and sharply lowers typing effort and spelling errors, at the cost of the list becoming a filter of its own: whatever does not appear is assumed not to exist, while the ordering rules stay all but invisible.",
"comparison": {
"focus": "Letting users recognise the target instead of recalling and spelling it",
"mechanism": "A popup candidate list that updates as they type and can be taken or ignored",
"cost": "Anything absent is assumed not to exist and the ordering is invisible"
},
"sources": [
{
"id": "autocomplete-w3c-apg",
"title": "W3C · ARIA Authoring Practices Guide: Combobox Pattern",
"url": "https://www.w3.org/WAI/ARIA/apg/patterns/combobox/",
"claim": "The pattern explains that a combobox is an input widget with an associated popup that enables users to choose a value for the input from a collection, where the popup may be a listbox, grid, tree, or dialog, and that some implementations present allowed values while others present suggested values. This entry paraphrases the widget structure from it and uses it to separate suggestion from constrained choice.",
"checkedAt": "2026-09-16",
"archive": {
"lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/ARIA/apg/patterns/combobox/",
"status": "available",
"checkedAt": "2026-09-16T05:45:51.213Z",
"jobId": "spn2-d4d6992153373f55a317fe7ec6043b6e8772a02b",
"url": "https://web.archive.org/web/20260916054653/https://www.w3.org/WAI/ARIA/apg/patterns/combobox/",
"timestamp": "20260916054653"
}
},
{
"id": "autocomplete-ui-patterns",
"title": "UI Patterns · Autocomplete design pattern",
"url": "https://ui-patterns.com/patterns/Autocomplete",
"claim": "The pattern states the problem as the user needing recognition-aided search when performing search tasks that are hard to remember or easily mistyped, and advises using it when an item can be entered in multiple ways and when what is typed can be readily matched to a specific piece of information in the system. This entry paraphrases the applicable conditions from it.",
"checkedAt": "2026-09-16",
"archive": {
"lookupUrl": "https://web.archive.org/web/20260916*/https://ui-patterns.com/patterns/Autocomplete",
"status": "pending",
"checkedAt": "2026-09-22T11:53:32.907Z",
"error": "status-request-failed",
"jobId": "spn2-64166990d3e6749fc10c28b2dbe3a1eca278d661"
}
}
],
"relations": [
{
"target": "recognition",
"kind": "realized_by",
"condition": "Users remember what the target looks like but cannot spell it exactly",
"reason": "Completion turns recall-based typing into picking from candidates, one concrete realisation of preferring recognition over recall.",
"basis": "editorial"
},
{
"target": "search-and-filter",
"kind": "composes_with",
"condition": "Completion sits on a search field where the raw query may still be submitted",
"reason": "Completion speeds up reaching a known item while filtering handles results that remain too many; both usually sit on the same path.",
"basis": "editorial"
},
{
"target": "explainability",
"kind": "composes_with",
"condition": "The ordering comes from recommendation or personalisation rather than plain prefix matching",
"reason": "Whatever is first is most likely to be chosen, so the basis for the order should be explainable rather than passed off as an objective result.",
"basis": "editorial"
}
],
"rules": [
{
"when": "The candidate list appears or updates",
"instruction": "Preserve what the user typed instead of overwriting the field with a candidate, and make the change in the number of candidates perceivable to a screen reader.",
"strength": "must",
"basis": "editorial"
},
{
"when": "No candidate matches",
"instruction": "Say plainly that nothing matched and still allow the raw input to be submitted, instead of showing an empty list.",
"strength": "must",
"basis": "editorial"
}
],
"behavior": {
"states": [
"idle",
"typing",
"suggesting",
"empty",
"selected"
],
"a11y": [
"The field and the candidate list are associated and the active option is announced",
"Arrow keys move, Enter confirms, and Escape closes the list while keeping what was typed"
],
"motion": "The list appears directly with no animation, and no transition under a reduced-motion preference"
},
"demo": null,
"version": "0.1.0",
"editorialStatus": "drafted",
"requirements": [],
"demoCapabilities": [],
"implementationNote": "This entry has no runnable specimen; the candidates in the illustration are fictional. Before shipping, verify keyboard operation and screen-reader announcement against the cited combobox pattern, and confirm that the raw input can still be submitted when nothing matches.",
"image": {
"src": "/images/autocomplete.webp",
"alt": "A fictional FIELDNOTES search field sketch: a short run of typed text in the field and a popup of five candidate rows below it, each starting with a dark fragment matching the input and continuing as grey placeholder bars, with the second row highlighted."
},
"searchTerms": [
"输入",
"建议",
"搜索",
"再认",
"列表"
]
}