Ghost Text Autocomplete Input — Free HTML CSS JS Snippet

Inline "ghost text" autocomplete is the interaction pattern behind GitHub Copilot, modern AI writing assistants, and command palettes that predict what you are about to type and let you accept it with a single keypress. The core visual idea is simple: as you type, a faint gray continuation appears immediately after your cursor, showing a plausible completion of the current phrase, and pressing Tab (or → when the cursor is already at the end of the text) commits that suggestion instantly. Continuing to type ignores or replaces it, and Escape clears it without accepting. This snippet builds that exact interaction from scratch in vanilla HTML, CSS, and JavaScript.

Why a native input can't do this alone

A native <input> or <textarea> renders a single string of text in a single color — there is no built-in way to render the first N characters in normal black text and the remaining characters in muted gray within the same field. Browsers do not expose a two-tone text API for form controls. So this snippet uses the standard workaround: a synced overlay technique. Two elements occupy the exact same box — a real, editable textarea on top (z-index: 2) and a non-interactive div behind it (.ghost-display) that mirrors the same font, padding, and line-height pixel-for-pixel. The textarea has normal, fully opaque text color so what the user types is always crisp and real. The div behind it contains two spans: .typed, which duplicates the user's current input but is rendered fully transparent (color: transparent), and .ghost, which holds the predicted suffix in a muted gray (#b0b7c3). Because the typed span is invisible and exactly matches the textarea's own rendered text in width, the ghost span lands in precisely the empty space right after the real caret — creating the illusion of a single field with two-tone text, when it is actually two perfectly aligned layers.

Keeping the layers in sync

Every input event re-renders both spans: typedSpan.textContent is set to the live value of the textarea, and ghostSpan.textContent is set to whatever suggestion currently applies. A scroll listener on the real textarea copies its scrollTop onto the overlay div so that if the user types enough to scroll the field, the ghost text scrolls in lockstep rather than drifting out of alignment. This synchronization is the part that makes the overlay technique actually work in production — without it, ghost text would visibly detach from the caret the moment the field scrolls or wraps.

Suggestion matching and acceptance

The suggestion engine here is intentionally simple and local: a small array of common phrase openers (email closings, meeting requests, apologies) is searched on every keystroke for any entry whose lowercase text starts with the user's current lowercase input and is longer than what has been typed so far. The remaining characters of the first match become the ghost suffix. Real products like Copilot replace this array with a language model call, but the rendering and event-handling mechanics — overlay sync, keyboard interception, and accept/dismiss/ignore semantics — are identical regardless of whether the suggestion comes from a static list or an API response.

Why this matters for 2026 interfaces

Inline predictive text is now a baseline expectation in AI-native products: search bars, chat composers, code editors, and even form fields increasingly show the system's best guess before the user finishes typing, making the interface feel anticipatory rather than reactive. Done well, it respects user agency — the suggestion is always visually distinct from committed text, never auto-inserted, and dismissible with a single keypress — which keeps the experience calm and predictable instead of feeling like the interface is taking over. Getting the layering, keyboard handling, and scroll-sync details right, as this snippet does, is what separates a convincing ghost-text field from one that flickers or misaligns under real use.