What is Autocomplete?

Autocomplete suggests options as users type, helping them complete input faster and more accurately. Shows dropdown of matches based on partial input. Common in search bars, address fields, tags, mentions. Reduces typing, prevents typos, guides users to valid options.

When Should You Use This?

Use autocomplete for large option sets (cities, products, users), search bars, tag selection, @mentions, or when users might not know exact format (airport codes, country names). Start showing suggestions after 2-3 characters. Highlight matching text. Allow keyboard navigation (arrow keys, Enter to select). Don't use for small sets (<10 options)—use dropdown instead.

Common Mistakes to Avoid

• •Too many results—limit to 5-10 suggestions; more is overwhelming
• •No keyboard support—users should navigate with arrows, select with Enter, close with Esc
• •Autocomplete for everything—small option sets should use dropdown/radio buttons
• •Slow to appear—suggestions should show <200ms after typing stops; cache common results
• •Not highlighting matches—bold the matching portion so users see why it was suggested

Real-World Examples

• •Google—search autocomplete with recent searches, trending queries, suggested completions
• •Slack—@mention autocomplete for users/channels, shows avatars and status
• •Linear—autocomplete for assignees, labels, projects with fuzzy search
• •Notion—autocomplete for page links, slash commands, @mentions