Skip to main content

Search

What you're building: a text input that queries Algolia as someone types, rendering matches into a card you designed in Webflow.

Search starts empty and reacts to typing. If you want a page that already shows results when it loads, you want Browse instead.

What you need​

  • Applies toYour text input

    Marks the box people type into.

  • Applies toA Div that holds results

    Where matches are rendered.

  • Applies toOne card inside the results Div

    Cloned once per result. Design it once.

Build it​

1. Mark the input. Add to your Webflow Input.

2. Add a results container. A Div where matches will appear, carrying .

3. Design one card. Inside the results Div, build a single result the way you want it to look, and mark it . It is cloned once per hit and cleared before each render.

4. Bind the fields. Inside the card, point elements at record fields:

<h3 wf-algolia-text="title"></h3>
<p wf-algolia-text="excerpt"></p>
<img wf-algolia-image="thumbnail" wf-algolia-alt="title" />
<a wf-algolia-link="slug" wf-algolia-link-prefix="/blog/"></a>

5. Publish.

Field names are case-sensitive

wf-algolia-text="Title" and wf-algolia-text="title" are different fields. A mismatch fails silently on that one binding while the rest of the card renders, which makes it look like the field is empty rather than misspelled.

Which index​

A search input uses, in order: its own wf-algolia-index, an index inherited from an ancestor, then data-index on the script tag. Most sites set it once on the script tag and never think about it again.

Highlighting matches​

Use instead of wf-algolia-text to wrap matched words in a <mark>. Style mark in Webflow to control how it looks; change the element itself with data-highlight-tag on the script tag.

wf-algolia-snippet does the same but truncates to a window around the match — better for long body copy.

Empty and loading states​

Mark a Div and it is shown only when a query returns nothing. Design it like any other element; the script only toggles visibility.

Searching several indices at once​

A federated dropdown searches more than one index and groups the results. See Autocomplete.

Troubleshooting​

SymptomCauseFix
Typing does nothingThe input has no wf-algolia-element="search-input"Add it to the Input, not its wrapper
Results never appearNo element marked results, or no template inside itBoth are required
Cards render but are blankField names do not match your recordsOpen a record in Algolia and copy the keys exactly
Only one result ever showsThe template was placed outside the results containerMove it inside
Nothing at all, console silentThe script did not loadVerify your setup