Applying Filters

Applying a value based Filter

When you want to apply filters to your search and don't want them to be displayed as facets. TermFilter applies a text filter to a particular field to the search.

Adding a filter to Searchkit Config

Within the Searchkit config, there is a filters array which allows you to configure one or more filters for your search. Below is an example of adding a term filter to search.

import {Filter} from '@searchkit/sdk';

const config = {
  host: 'http://localhost:9200',
  index: 'movies',
  hits: {
    fields: ['actors', 'writers'],
  },
  filters: [
    new Filter({
      identifier: 'type',
      field: 'type',
      label: 'type',
    }),
  ],
};

const request = Searchkit(config);
const response = await request
  .setFilters([{identifier: 'type', value: 'movies'}])
  .execute({
    hits: {
      size: 10,
      from: 0,
    },
  });

Options

Option	Description
field	field to be used for term filter, preferably a field that is raw, not tokenized
identifier	Required to be unique. Used to apply filters on field
label	UI label for appliedFilters node.
display	Optional. Used on UI to specify what component to handle filter in SelectedFilters

The filters that you will apply will also be returned in the response under summary.appliedFilters.

{
  "hits": {
    "items": [
      // 10 items
    ],
    "page": {
      "from": 0,
      "pageNumber": 0,
      "size": 10,
      "total": 11,
      "totalPages": 2
    }
  },
  "sortedBy": undefined,
  "summary": {
    "appliedFilters": [
      {
        "display": "TermFilter",
        "id": "type_movies",
        "identifier": "location",
        "label": "Location",
        "value": "movies"
      }
    ],
    "disabledFilters": [],
    "query": "",
    "sortOptions": [],
    "total": 11
  }
}

Applying a numeric range filter

When you want to apply filters to your search and don't want them to be displayed as facets. NumericRangeFilter applies a numberic range filter to a particular field to the search.

• Adding a date range component to UI

Elasticsearch Mapping

Below is an example mapping for the field metascore. We need to use a numeric type field type for this facet.

{
  "properties": {
    "metascore": {
      "type": "float"
    }
  }
}

Adding a filter to Searchkit Config

Within the Searchkit config, there is a filters array which allows you to configure one or more filters for your search. Below is an example of adding a NumericRangeFilter to search.

import {Filter} from '@searchkit/sdk';

const config = {
  host: 'http://localhost:9200',
  index: 'movies',
  hits: {
    fields: ['actors', 'writers'],
  },
  filters: [
    new Filter({
      identifier: 'metascore',
      field: 'metascore',
      label: 'Score',
    }),
  ],
};

const request = Searchkit(config);
const response = await request
  .setFilters([{identifier: 'metascore', min: 10, max: 90}])
  .execute({
    hits: {
      size: 10,
      from: 0,
    },
  });

Options

Option	Description
field	field to be used for term filter, preferably a field that is raw, not tokenized
identifier	Required to be unique. Used to apply filters on field
label	UI label for appliedFilters node.
display	Optional. Used on UI to specify what component to handle filter in SelectedFilters

The filters that you will apply will also be returned in the response under summary.appliedFilters.

{
  "hits": {
    "items": [
      // 10 items
    ],
    "page": {
      "from": 0,
      "pageNumber": 0,
      "size": 10,
      "total": 11,
      "totalPages": 2
    }
  },
  "sortedBy": undefined,
  "summary": {
    "appliedFilters": [
      {
        "display": "NumericRangeFilter",
        "id": "metascore_10_90",
        "identifier": "metascore",
        "label": "Score",
        "value": "10 - 90"
      }
    ],
    "disabledFilters": [],
    "query": "",
    "sortOptions": [],
    "total": 11
  }
}

Applying a date range filter

When you want to apply filters to your search and don't want them to be displayed as facets. NumericRangeFilter applies a numberic range filter to a particular field to the search.

Elasticsearch Mapping

Below is an example mapping for the field releasedby. We need to use a numeric type field type for this facet.

{
  "properties": {
    "releasedby": {
      "type": "date"
    }
  }
}

Adding a filter to Searchkit Config

Within the Searchkit config, there is a filters array which allows you to configure one or more filters for your search. Below is an example of adding a NumericRangeFilter to search.

import {Filter} from '@searchkit/sdk';

const config = {
  host: 'http://localhost:9200',
  index: 'movies',
  hits: {
    fields: ['actors', 'writers'],
  },
  filters: [
    new Filter({
      identifier: 'releasedby',
      field: 'releasedby',
      label: 'Released By',
    }),
  ],
};

const request = Searchkit(config);
const response = await request
  .setFilters([{identifier: 'releasedby', dateMin: '2021-07-11T13:03:37.061Z'}])
  .execute({
    hits: {
      size: 10,
      from: 0,
    },
  });

Options

Option	Description
field	field to be used for term filter, preferably a field that is raw, not tokenized
identifier	Required to be unique. Used to apply filters on field
label	UI label for appliedFilters node.
display	Optional. Used on UI to specify what component to handle filter in SelectedFilters

The filters that you will apply will also be returned in the response under summary.appliedFilters.

{
  "hits": {
    "items": [
      // 10 items
    ],
    "page": {
      "from": 0,
      "pageNumber": 0,
      "size": 10,
      "total": 11,
      "totalPages": 2
    }
  },
  "sortedBy": undefined,
  "summary": {
    "appliedFilters": [
      {
        "display": "DateRangeFilter",
        "id": "releasedby",
        "identifier": "releasedby",
        "label": "Released By",
        "value": "2021-07-11T13:03:37.061Z"
      }
    ],
    "disabledFilters": [],
    "query": "",
    "sortOptions": [],
    "total": 11
  }
}

Applying a geolocation value filter

When you want to apply a geo location filter to your search and don't want them to be displayed as facets.

Adding a filter to Searchkit Config

Within the Searchkit config, there is a filters array which allows you to configure one or more filters for your search.

import {Filter} from 'searchkit/sdk';

const config = {
  host: 'http://localhost:9200',
  index: 'movies',
  hits: {
    fields: ['actors', 'writers'],
  },
  filters: [
    new Filter({
      identifier: 'location',
      field: 'location',
      label: 'Location',
    }),
  ],
};

const request = Searchkit(config);
const response = await request
  .setFilters([
    {
      identifier: 'location',
      geoBoundingBox: {
        topLeft: {lat: 50.73, lon: -75.1},
        bottomRight: {lat: 40.01, lon: -55.12},
      },
    },
  ])
  .execute({
    hits: {
      size: 10,
      from: 0,
    },
  });

Options

Option	Description
field	field to be used for term filter, preferably a field that is raw, not tokenized
identifier	Required to be unique. Used to apply filters on field
label	UI label for appliedFilters node.
display	Optional. Used on UI to specify what component to handle filter in SelectedFilters

The filters that you will apply will also be returned in the response under summary.appliedFilters.

{
  hits: {
    items: [
      // 10 items
    ],
    "page": {
      "from": 0,
      "pageNumber": 0,
      "size": 10,
      "total": 11,
      "totalPages": 2,
    }
  },
  "sortedBy": undefined,
  "summary": {
    "appliedFilters": [
      {
        "bottomRight": {
          "lat": 40.01,
          "lon": -55.12,
        },
        "display": "GeoBoundingBoxFilter",
        "id": "location_{\\"topLeft\\":{\\"lat\\":50.73,\\"lon\\":-75.1},\\"bottomRight\\":{\\"lat\\":40.01,\\"lon\\":-55.12}}",
        "identifier": "location",
        "label": "Location",
        "topLeft": {
          "lat": 50.73,
          "lon": -75.1,
        }
      }
    ],
    "disabledFilters": [],
    "query": "",
    "sortOptions": [],
    "total": 11,
  },
}