v152 · Web APIs · DOM · OpaqueRange

Autocomplete Overlay

An autocomplete dropdown positioned precisely at the caret using OpaqueRange.getBoundingClientRect(). Type @ or : to trigger suggestions anchored to the exact cursor position in the input.

OpaqueRange not detected. Falling back to caret position estimation. Chrome 152+ is required for native pixel-accurate positioning.
Type in the field below. Use @ to mention a person, or : for an emoji shortcode. The dropdown anchors to the caret position.

more field examples

Code editor — @ for variable name
Comment box — @ mention + : emoji

positioning with OpaqueRange

// Get caret position in the input using OpaqueRange
const input = document.querySelector('input');
const caretPos = input.selectionStart;

const range = input.createValueRange(caretPos, caretPos + 1);
const caretRect = range.getBoundingClientRect();

// Anchor dropdown below caret
dropdown.style.left = `${caretRect.left}px`;
dropdown.style.top  = `${caretRect.bottom + 4}px`;

// No hacks needed:
// - No mirroring the input in a hidden div
// - No canvas measurement
// - Works when input has padding, letter-spacing, custom fonts

see also

feature reference

ChromeStatus entry