Skip to main content

Custom Filters

When you want to apply filters to your search and don't want them to be displayed as facets. Some examples could include:

  • Adding a search box for a particular filter
class CustomFilter {
excludeOwnFilters = false
constructor() {}
getIdentifier() {
return "CustomFilter"
}
// returns the ES query. Requires to return a boolean query
// https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-bool-query.html
getFilters(filters) {
return {
"bool": {
"filter" : filters.map((filter) => {
return { "term" : {"tag": filter.value }}
})
}
}
}
// powers the appliedFilters type for all filters added
getSelectedFilter(filterSet) {
return {
type: 'ValueSelectedFilter',
id: `${this.getIdentifier()}_${filterSet.value)}`,
identifier: this.getIdentifier(),
label: "Custom Filter",
value: filterSet.value,
display: "Custom"
}
}
}
const searchkitConfig = {
host: process.env.ES_HOST || 'http://localhost:9200',
index: 'us_parks',
query: new MultiMatchQuery({ fields: ['title'] }),
filters: [
new CustomFilter()
]
}

With this configured, you should be able to apply a GQL query like below

{
results(filters: [{ identifier: "CustomFilter", value: "test" }]) {
summary {
appliedFilters {
id
identifier
label
display
... on ValueSelectedFilter {
value
}
}
}
hits {
items {
id
}
}
}

If you're using @searchkit/client, you will be able to apply the filter like so

const CustomFilterComponent = () => {
const api = useSearchkit()
return (
<div>
<a onClick={() => {
api.toggleFilter({ identifier: "CustomFilter", value: "test" })
api.search()
}}>Toggle test filter</a>
</div>
)
}