Back to Docs
Recipe

At Mentions Autocomplete

Build a real-time user mention picker with keyboard navigation and inline chip insertion.

Overview

The @ mention pattern triggers a floating autocomplete panel filtered by typed query. Arrow keys navigate results, Enter or click inserts a styled chip inline without breaking the text flow.

Core Behavior

  • Typing @ in a contenteditable or textarea opens the suggestion panel.
  • Subsequent characters narrow results via substring match on username and display name.
  • ArrowUp / ArrowDown move highlight; Enter or Tab commits the selection.
  • Escape dismisses the panel without inserting.

Data Flow

  1. Trigger detection— watch input events for @ at cursor position.
  2. Debounced fetch— query /api/users/search?q=with 150ms debounce.
  3. Render panel— absolutely positioned div near the caret with max 8 results.
  4. Commit — replace @query with a mention token and emit the updated value.

Chip Rendering

Inserted mentions render as inline badges with the user avatar, display name, and a subtle violet background. They behave as atomic tokens — backspace removes the entire chip, not individual characters.

A@alexJ@jordan

Edge Cases

  • Empty result set shows a “No users found” state.
  • Network error falls back to a cached user list if available.
  • Multiple @ triggers in the same input are handled independently.
  • Panel repositions when it would overflow the viewport.
← All RecipesView Implementation →