Typeahead

Grey ghost text that completes the word being typed — type some and the input shows some·thing. Completions are generic English words from a frequency-ranked list, not site content, so nothing is fetched from the search API per keystroke and nothing lands in search analytics.

Shared setup - the script tag - is in the getting started guide. Typeahead works on its own: it does not need a list or search block on the page.

Minimal setup

One attribute on any text input:

<input type="text" data-slater-typeahead placeholder="Search…" />

Attribute	On	Value	Required
`data-slater-typeahead`	`<input>`	none — presence is enough (a value is reserved for future options)	yes

Standalone mode: a navbar search box

An input outside any list or search block (a navbar, a footer) becomes a mini search launcher: add data-slater-search-page and pressing Enter goes to your search page with the query in the URL.

<form>
  <input type="text"
         data-slater-typeahead
         data-slater-search-page="/search"
         placeholder="Search the site…" />
</form>

Attribute	On	Purpose
`data-slater-search-page`	the input	Site-relative path (or absolute URL) of the page with your search block. Enter navigates to `{page}?query={typed text}`. Without it, Enter is left alone.

The wrapping <form> is optional; when present, Enter navigates instead of submitting the form.
Do not also put data-slater-search on a standalone input — that attribute binds an input to a list/search block on the page.

Put a global search block on the target page — it picks the query up automatically via its ?query= deep link and runs the search on load.

On a search block's input

The same attribute added to an existing in-block search input layers ghost completion on top of the live results:

<input type="text" data-slater-search="site" data-slater-typeahead />

Accepting a completion behaves exactly like typing it — the block's debounced search runs with the completed word.

Behavior

Suggests after 2+ letters of the trailing word; multi-word queries keep earlier words and complete only the last one.
Accept: Tab, or → with the caret at the end, or tap/click the ghost text (the touch gesture — phones have no Tab key).
Dismiss: Escape (until the next keystroke), deleting, moving the caret, or leaving the field.
Enter never accepts the ghost — it searches exactly what was typed.
Typed casing is kept: Some completes to Something.
The word list (~74 KB, the top 10,000 English words by frequency) is fetched once per page, on first focus of a typeahead input — pages where nobody touches the search box never load it. If the fetch fails, the feature silently turns off; typing and Enter keep working.
English-only for now; digits and apostrophes end a word (don' suggests nothing).
Suppresses the browser's own autofill/autocorrect UI on the input — only where you haven't set those attributes yourself (an explicit autocomplete="…" is respected).

Styling

The ghost inherits the input's font, alignment, and color (at 45% opacity), so it adapts to dark navbars without configuration. To restyle it:

[data-slater-typeahead-ghost] {
  color: #999 !important;   /* !important — the embed sets an inline color */
  opacity: 1 !important;
}

The overlay mirrors the input's geometry from a position: absolute element. An ancestor with a CSS transform changes what absolute is relative to and breaks the alignment — keep typeahead inputs out of transformed containers.

Accessibility

The input gets aria-autocomplete="inline"; the ghost overlay is aria-hidden and out of the tab order.
No live-region announcements per keystroke — at typing speed that's noise. The suggestion never changes the typed text without an explicit accept, and the accepted value is right there in the input for the screen reader to review. The search block's result count (data-slater-count) remains the polite announcement of what a search produced.