Select filters
What you're building: a dropdown that filters by one value from a facet, for lists too long to show in full.
Same behaviour as a radio filter, less vertical space.
What you need
- Applies toA Div inside the browse wrapper
The group.
- Applies toThe group
Which facet to filter on when a value is picked.
- Applies toThe group
Which facet to read the options from. Same value as the field.
- Applies toThe group
Renders as a dropdown.
- Applies toOne option inside the select
Cloned per facet value.
A select filter needs both and
, set to the same value. The first tells the
script what to filter on; the second tells it where to read the options from. A
group with only wf-algolia-field renders an empty dropdown.
Build it
Put a Webflow Select inside the group, add a plain option for the "any" choice,
and mark a second <option> as the template. The script clones the template per
facet value.
<div
wf-algolia-element="filter-group"
wf-algolia-field="brand"
wf-algolia-facet="brand"
wf-algolia-type="select"
>
<select>
<option value="">All brands</option>
<option wf-algolia-element="filter-template">{value}</option>
</select>
</div>
Each clone gets the facet value as its option value and as its label, so the dropdown fills itself from your data.
Clearing the filter
The "All" entry is a plain option with an empty value. Picking it clears the filter. Author it yourself, above the template, and leave its value blank:
<option value="">All brands</option>
Do not use here. That attribute drives the "All" entry for checkbox and radio filters, which are built from Divs. It does nothing inside a native select, and it takes a field name rather than a label.
Your "All" option survives every refresh of the list, and stays at the top, because the script only replaces the options it injected.
Labelling the options
By default each option shows the facet value exactly as Algolia stores it. To wrap it in some text, put a on the template option, or just type the template as the option's text:
<option wf-algolia-element="filter-template">Brand: {value}</option>
Only {value} is available. Facet counts are not supported inside a native
option: a count would be frozen at the moment the list was built and would go
stale as soon as the visitor changed another filter. Use a
checkbox or radio filter if you need counts next to
each value.
Ordering
Dropdowns are scanned, not searched, so alphabetical usually beats count-descending here: .
When the list is very long
Past a few dozen values a dropdown becomes hard work. Add a typeahead over the values instead — see Filter search.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| The dropdown is empty | The group has no wf-algolia-facet | Add it, set to the same value as wf-algolia-field |
| The dropdown is empty | The facet is not declared in Algolia | Configuration → Facets |
| Every option shows the same text | Script older than 1.1.0 | Update to @candid-leap/wf-algolia@1 |
| Picking any option filters on the same value | Script older than 1.1.0 | Update to @candid-leap/wf-algolia@1 |
| No way to clear the filter | No option with an empty value | Add <option value="">All</option> |
| Nothing happens when clearing | Used wf-algolia-default-option instead of a blank option | Use a blank-value option |
| Options appear in a strange order | Default sorting is by result count | wf-algolia-sort="alpha" |
| Several values can be chosen | The element is a multi-select | Use a single select |