So, You Want to Build an @mention Autocomplete Feature?

Autocomplete is a familiar feature: type into a search box, and suggestions appear. While common in e-commerce, its use as a typing enhancement is often overlooked.

Modern web apps are moving beyond simple text areas. Social and productivity platforms like Twitter, Slack, and Notion utilize the “@mention” pattern, allowing users to reference others using triggers like "@" or "#". This enhances the typing experience by providing a suggestion panel, allowing quick referencing without leaving the keyboard.

This pattern boosts consistency in user-generated content. Hashtags, for instance, create semi-structured data within free-form text, aiding content categorization. Mentions create connection graphs across app resources, simplifying content recommendations and user behavior analysis.

See live demo See how we built it ### Crafting Effective @mentions

A successful @mention autocomplete should be seamless. It acts as a helpful assistant, learning as you type, but knowing when to step aside. Users can ignore suggestions or easily use them to complete their input.

Twitter's implementation closes the panel when the typed word is no longer a valid token (e.g., after a space, as handles don't contain spaces). Slack's approach is more flexible, allowing spaces for full-name searches, using different heuristics to detect user intent.

Upon selection, Twitter closes the panel, inserts the mention, and adds a space for continued typing. This seemingly small detail contributes to a fluid user experience.

Mentions, once added, become interactive. On Twitter, clicking or using arrow keys to select a mention reopens the panel, allowing editing and ensuring correct notification upon sending.

The open-source Autocomplete library simplifies this process. While ideally suited for Algolia, it works with any data source and facilitates building multi-source, accessible autocomplete features.

Combining Suggestion Types

Using distinct symbols (e.g., "@" for people, "#" for hashtags) works well with few, clearly defined types. However, with more numerous or less distinct types, users may struggle to remember all the symbols.

Federated search (multi-source) allows for assigning multiple types per symbol, improving discoverability without overwhelming users with numerous patterns.

Slack mixes suggestions, differentiating them visually (icons, badges). Notion groups suggestions by type (dates, people, links), promoting consistency and user muscle memory. This grouping can be achieved through multi-source queries or tools like Autocomplete's Reshape API.

Notion also utilizes dynamic placeholders, predictive suggestions that update as the user browses, clarifying the action associated with each suggestion. They cleverly use CSS Custom Properties and JavaScript to achieve this.

Managing the number of results from multiple sources can be challenging. A fixed-height panel with a scrollbar or using combining/limiting mechanisms (like Autocomplete's Reshape API) can address this.

Expanding Beyond Basic Search

The @mention pattern's versatility extends beyond its typical implementation. Slack's emoji search (using ":") and Notion's action insertion ("/") use similar mechanisms: a special character opens a suggestion panel, allowing selection and application.

Notion's approach highlights the pattern's adaptability through custom item templates and styling. This creates a familiar and fluid experience across various apps.

See demo ### Beyond Type Completion

While mentions enhance typing, composition boxes can function as conversational interfaces. Notion's "/" shortcut triggers action insertion, creating new blocks of a specific type.

This "slash command" pattern, popularized in gaming, is now standard in apps like Slack and Discord. It centralizes common tasks, reducing friction and cognitive load. For example, a "/zoom" command simplifies initiating and sharing Zoom meetings.

Previously limited to power users, slash commands are becoming more prevalent and user-friendly. Augmenting the typing experience isn't about adding complex features, but about providing the right information at the right time, reducing cognitive load and improving user experience.

See demo

The above is the detailed content of So, You Want to Build an @mention Autocomplete Feature?. For more information, please follow other related articles on the PHP Chinese website!