SelectedFilter & ResetSearchButton

Elastic Search
1

Hello, is there some provision to make the a SelectedFilter components where the selected filters are easily seen and from where they can be deselected. And a ResetSearchButton component with which to clean all filters easily.

Other solutions like Searchkit have these components and the truth is that they are very useful and here they are missing.

I share the links where you can see them.
https://searchkit.co/docs/build-your-own-components/selected-filters

Maybe some body has implemented them for Elastic App Search by their own and would like to share them. Thanks

2

We don't have those currently in search-ui. You'll have to build them yourself. The actions are available you just need to build a component for them: search-ui/ADVANCED.md at master · elastic/search-ui · GitHub.

For instance, a reset button:

import React from "react";
import { withSearch } from "@elastic/react-search-ui";

function Reset({ reset }) {
  return (
    <div>
      <button onClick={() => reset()}>
        Reset
      </button>
    </div>
  );
}

export default withSearch(({ reset }) => ({
  reset
}))(Reset);

Or a filter component:

import React from "react";
import { withSearch } from "@elastic/react-search-ui";

function SelectedFilters({ filters, removeFilter }) {
  // iterate through filters, print them to the page, and add a `removeFilter` click action
}

export default withSearch(({ filters, removeFilter }) => ({
  filters, removeFilter
}))(SelectedFilters);
3

Thanks Jason,
I'll try and tell you if I manage to do it. I am not familiar with React programming.
I hope they are available soon in search-ui

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.