Skip to Content
EditorSearch & filters

Search & filters

The Search & filters module helps end users find locations quickly. Search and filters are not restricted to the directory — they also affect the map, highlighting the locations that match while dimming the rest.

Open the Search & filters panel and toggle it on to enable the module.

Options

Panel-level settings control how the search field and filter controls behave.

NameDescription
Text searchShow a text input that searches locations by title and about. On by default.
VisibilityKeep the filters permanently visible (Always) or let the user open and close them (Toggle).
By defaultWhen filters are toggleable, choose whether they start Opened or Closed.
Auto-collapseClose the filter panel automatically when the user clicks outside of it.
PositionPosition of the search & filters controls on the left or right.

Filter types

When several filters are active their effects accumulate — only locations matching all active filters are shown. Add a filter from the Filters list and pick one of five types:

A single-select index based on the initial letter of each location title.

OptionDescription
NameDisplay name of the filter.
LabelShow or hide the filter name.
LayoutScrollable one-line (Inline) or wrapped multiline (Wrap) layout.
ToggleLet users toggle the layout by clicking the filter title (requires Label).

Every filter also has Advanced options: a unique id, the read-only type, and a disable toggle to temporarily switch it off. See the Filter schema for the full field reference.

Conditions

The Checkbox, Dropdown, and Toggle group types filter locations with a JavaScript expression. A location is kept whenever the expression returns a truthy value.

  • l is the location object.
  • value is the currently selected value (Dropdown and Toggle group only).
// locations with a 'phone' field defined l.phone // locations with a non-hidden 'type' l.type !== 'hidden' // locations with a 'title' longer than 10 characters l.title.length > 10 // locations whose 'country' custom field matches the selected value l.country === value
💡
Conditions require basic JavaScript knowledge. Custom fields referenced in a condition (like l.country) are added on the Custom fields of a location.

Values

Dropdown and Toggle group filters build their options from the value field. Separate each option with a semicolon, and split the stored value from its visible text with a colon.

:(Select floor);first:First floor;ground:Ground floor;underground:Underground

The example above renders the following options (the first pair has an empty value, so it acts as a placeholder):

<select> <option value="">(Select floor)</option> <option value="first">First floor</option> <option value="ground">Ground floor</option> <option value="underground">Underground</option> </select>

Combine the value with a condition such as l.floor === value to filter locations by the selected option.

Groups

The Groups filter type draws its chips from the groups assigned to your locations. Groups are created and managed in the Directory panel — see Groups for how to define them and assign locations.

💡
Filters can also be controlled programmatically. See the JavaScript API for the available filter methods.
Last updated on