Skip to main content

Filter search

What you're building: a small search box inside a filter group, for finding a value among hundreds.

A brand filter with twelve values is a list. With twelve hundred, it needs a search box.

What you need

  • Applies toA text input inside the filter group

    The box people type into.

  • Applies toA Div inside the group

    Where matching values render.

  • Applies toOne row inside that Div

    Cloned per matching value.

The facet must be searchable in Algolia

This uses Algolia's search-for-facet-values API, which only answers for attributes declared searchable. A facet left as filter-only will filter perfectly and this box will do nothing at all.

Algolia dashboard → Configuration → Filtering and Faceting → Facets → set the attribute to "Searchable (will return facets list)".

index.setSettings({ attributesForFaceting: ['searchable(brand)'] });

This is the single most common cause of "filter search does nothing", and no attribute in Webflow can work around it.

Build it

Inside an existing filter group, add the input, a results container, and one row template. Mark the row's label so the value renders.

Add for a "nothing matched" state.

Timing

The box inherits the global debounce. Set on the group to override it for this input alone.

Troubleshooting

SymptomCauseFix
Typing returns nothing, everThe facet is filter-only in AlgoliaMake it searchable
Results appear but selecting does nothingNo filter-value-text in the templateAdd it
The box searches results, not valuesIt is marked search-input rather than filter-searchUse the right role