Filtering Search Results

The Searchcraft SDKs provide a component called <searchcraft-filter-panel> that renders a view that allows users to filter their search results in different ways. When a user interacts with the filters in a Filter Panel, a new search request is made, and the search results displayed in the <searchcraft-search-results> component are automatically updated.

Rendering a Filter Panel

JS

index.html

<searchcraft-filter-panel></searchcraft-filter-panel>

main.ts

document.addEventListener('DOMContentLoaded', () => {
  const filterPanel = document.querySelector('searchcraft-filter-panel');
  if (filterPanel) {
    filterPanel.items = filterPanelItems;
  }
});

React

Component.tsx

import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
// In your component:
<SearchcraftFilterPanel items={filterPanelItems} />

Vue

Component.vue

<template>
  <SearchcraftFilterPanel :items="items" />
</template>
<script>
import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
...
</script>

The items Prop

The <searchcraft-filter-panel> component requires a prop called items. This prop is an array of objects that defines which filters the panel should show. You can include as many or as few items in the array as you need.

An items array will look something like this:

const filterPanelItems = [
  {
    type: 'exactMatchToggle',
    label: 'Exact Match',
    options: {
      subLabel: 'Specify to use exact matching or fuzzy matching.',
    },
  },
  {
    type: 'mostRecentToggle',
    label: 'Most Recent',
    options: {
      subLabel: 'Choose whether to sort by most recent.',
    },
  },
  {
    type: 'dateRange',
    fieldName: 'date_published', // This is a corresponding index field name of your index
    label: 'Date range example',
    options: {
      minDate: pastDate,
      maxDate: today,
      granularity: 'year',
    },
  },
  {
    type: 'numericRange',
    fieldName: 'number_field', // This is a corresponding index field name of your index
    label: 'Numeric range example',
    options: {
      min: 0,
      max: 100,
      granularity: 10,
    },
  },
  {
    type: 'facets',
    fieldName: 'section',
    label: 'Filters',
    options: {
      showSublevel: true,
    },
  }
];

For a complete reference to all available filter panel item types and their properties, see the Filter Panel Items reference page.

Toggling Filter Panel Visibility on Mobile

On mobile layouts, the filter panel can be hidden by default to save screen space. You can add the data-toggle-filter-panel attribute to any HTML element (such as a button) to toggle the visibility of the filter panel.

JS

index.html

<h2 data-toggle-filter-panel>Filters</h2>
<searchcraft-filter-panel></searchcraft-filter-panel>

React

Component.tsx

import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";

<h2 data-toggle-filter-panel>Filters</h2>
<SearchcraftFilterPanel items={filterPanelItems} />

Vue

Component.vue

<template>
  <h2 data-toggle-filter-panel>Filters</h2>
  <SearchcraftFilterPanel :items="items" />
</template>
<script>
import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
...
</script>

When the element with data-toggle-filter-panel is clicked on mobile, it will toggle the visibility of the filter panel. This may be combined with the responsiveBreakpoint setting on the filter panel component if custom breakpoints are desired.