Autocomplete
Suggesting completions while someone types, which needs prefix-friendly indexes, ranking by likely intent, and careful handling of latency, typos, and accessibility.
Autocomplete suggests completions for what a person is typing, updating with each keystroke. It shows up in search boxes, address bars, code editors, command palettes, and form fields for cities or tags. Done well, it turns recall into recognition: a person doesn't have to remember an exact name, only spot it in a short list, which also reduces spelling errors and nudges queries toward ones that return results.
Behind the box are three problems: finding candidates fast, ranking them, and presenting them.
Finding candidates. Each keystroke produces a prefix, and the system must return matches in milliseconds. A Trie stores strings by shared prefixes, so all completions of "elec" sit beneath one node. Search engines instead build an inverted index of edge n-grams, indexing "e", "el", "ele", and so on for every word, so ordinary lookups double as prefix matches. Small lists, a few thousand items, can simply be filtered in the browser.
Ranking. Many strings share a prefix, so the order decides usefulness. Common signals are popularity, the user's own history, recency, and context, such as the current page or Faceted Search filters. Search engines rank by how often a query is typed and how often it leads to a click. Predictive text on phones uses a language model, a much larger version of the same idea as a Markov Chain predicting the next word.
Tolerating mistakes. People mistype, so good autocomplete matches approximately, using edit distance to accept "recieve" for "receive." Fuzzy matching on initials, typing "gcm" for "git commit," is common in editors and Command Palette tools.
The latency budget is tight. Suggestions must arrive faster than the next keystroke, or the list flickers behind the typing. Clients use Debounce and Throttle to avoid a request per key, cancel stale requests so an old response can't overwrite a newer one, a kind of race condition, and cache earlier prefixes. Servers keep suggestion indexes small and in memory.
Presentation. The interface pattern is a combobox, a text input tied to a popup list. Arrow keys move through suggestions, Enter accepts, and Escape closes. Screen readers need ARIA roles and live announcements to know suggestions exist at all, and Accessibility testing often finds autocomplete broken here. Too many suggestions cost decision time, per Hick's Law, so lists are usually limited to five to ten items.
Autocomplete also shapes behavior. Suggestions steer people toward popular queries, can surface offensive or defamatory completions, and leak what others search for, so large services filter suggestion lists by hand. In a form, the browser's own autofill draws on saved Personal Data, which is why fields should declare what they hold.
See also3
Postal Address
The everyday string that tells a carrier where to deliver mail, far less regular than forms assume, with postal codes that are delivery routes rather than areas, and a long list of countries and people that don't fit the standard fields.
Data & Content5 connections
Dropdown Menu
A control that hides a list of options until it's opened, saving space at the cost of hiding choices, which ranges from desktop menu bars to the web's notoriously hard-to-style select element and the sprawling mega menus of retail sites.
Design & Interface17 connections
Input Method
The software layer that turns keystrokes into text for writing systems with far more characters than a keyboard has keys, such as Chinese, Japanese and Korean, by letting people type sounds or shapes and choose from candidates.
Systems & Tooling8 connections
Linked from11
- Debounce and ThrottleWeb Platform
Two opposite strategies for limiting how often a handler runs against a rapid stream of events.
- Dropdown MenuDesign & Interface
A control that hides a list of options until it's opened, saving space at the cost of hiding choices, which ranges from desktop menu bars to the web's notoriously hard-to-style select element and the sprawling mega menus of retail sites.
- Hick's LawDesign & Interface
Decision time rises with the number and complexity of choices offered, roughly logarithmically — fewer options decided faster.
- Input MethodSystems & Tooling
The software layer that turns keystrokes into text for writing systems with far more characters than a keyboard has keys, such as Chinese, Japanese and Korean, by letting people type sounds or shapes and choose from candidates.
- Markov ChainAgents & Language Models
A process whose next state depends only on the present state, and the basis of pre-neural text generation.
- Personal DataData & Content
Any information that relates to an identifiable person, why it is broader than names and emails, and the engineering habits that privacy law now expects.
- Postal AddressData & Content
The everyday string that tells a carrier where to deliver mail, far less regular than forms assume, with postal codes that are delivery routes rather than areas, and a long list of countries and people that don't fit the standard fields.
- SMSNetworks & Distribution
Text messages of up to 160 characters sent between mobile phones, designed in the 1980s as a side feature of the GSM standard and grown into a global habit, a login code channel, and a fraud vector.
- Stemming and LemmatizationData & Content
Reducing words to a common base form so a search for "running" also finds "runs" and "ran," with stemming chopping suffixes by rule and lemmatization looking up the dictionary form.
- TrieComputation & Algorithms
A tree that stores strings by shared prefix, so each node represents a prefix all its descendants extend.
- Web Search EngineWeb Platform
A system that crawls the web, indexes what it finds, and ranks pages in answer to typed queries, the main way people have found things online since the late 1990s and one of the largest advertising businesses ever built.