Building an @Mention Autocomplete: The Caret-Scanning Trick Behind Every Trigger Popup
Build an @mention autocomplete in vanilla JS using the Selection and Range APIs — caret scanning, a saved Range, and a non-editable chip.
Building an @Mention Autocomplete: The Caret-Scanning Trick Behind Every Trigger Popup
Type @ into a Slack message, a Linear comment, or a Notion doc and a little popup appears, filtered to whoever you're typing next. It feels like a small feature. It isn't. A plain <input> gives you a text value and a cursor position for free — but the moment you need rich content like a coloured, non-editable "chip" sitting inline with normal text, you're in contenteditable territory, and the browser hands you almost nothing. There's no built-in "what's the user typing right now" API. You get a Selection object, a Range , and the DOM tree itself, and you have to reconstruct "is there an unfinished mention behind the cursor, and if so what letters has the user typed since the @" by hand, on every keystroke. The Mention Autocomplete snippet does exactly that — live search popup, keyboard navigation, and a real inline chip — in plain JavaScript with no editor library. Here it is, working: Grab the code, or open the full editor with li…
