Design Engineering 101: Typeahead

"A text input field with typeahead suggests completions as you type, right inside the field. I've seen two variants of the feature: Dimmed text: Completed text is appended as dimmed text after the user input. Commonly used in terminals, code editors or text editors. Highlighted text: Completed text is appended as highlighted text with additional styled text."

"The actual completion looks like a text selection. The appended text is blue and not part of the completed text. The caret is hidden when a completion is displayed. Users can continue to type, even though text appears selected. Normally, new input would override the selected text. Pressing backspace removes the completion, not the last character you typed."

"This is certainly not standard behaviour of any native HTML element. So I got into a rabbit hole to figure out how I can implement this. Characters are typed using setInterval() and a caret is displayed even though the field isn't focussed."

Typeahead is a text input feature that suggests completions while users type. Two main variants exist: dimmed text completions (used in terminals and code editors) and highlighted text with styled additional content (like Apple Spotlight). The highlighted variant displays completions as selected text, appends styled action text, hides the cursor, allows continued typing without overriding selections, and removes completions with backspace rather than typed characters. This non-standard behavior requires custom implementation beyond native HTML elements. A working interactive demo demonstrates real typeahead functionality using setInterval() for character input and custom caret display.

Read at Florianschulz