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.