Add a search button on Filtersearch component

Pages
1

Hi, on a React Pages project I’m working on, on the locator page, I’ve added the search bar using the component
Is this the right component to use? It doesn’t seem to have the option to add a search button to it, so I decided to add a custom button next to it.
The button has a function assigned to the onclick event that sets a new query and executes a Vertical Query (using searchActions)
The results are correctly updated, but it doesn’t seem to integrate very well. I have a couple of questions:

  • I can’t find a Matcher of type “similar/starts with”, is there anything I can use instead when setting a static filter?
  • After running the query, the search field is emptied, is this to be expected (which means I should repopulate it with the user’s input after the query has been executed) or is my code not integrating how it should?
  • Am I supposed to use a different component altogether, that already comes with the button instead (I couldn’t find it)?

For reference, this is the code run in the onclick function:

const locationFilter: SelectableStaticFilter = {
   selected: true,
   filter: {
     kind: "fieldValue",
     fieldId: "address.city", // should this be builtin.location?
     value: query, // query is defined previously, and corresponds to the search field's value
     matcher: Matcher.Equals,
   },
 };
 searchActions.setQuery(query);
 searchActions.setStaticFilters([locationFilter]);
 searchActions.executeVerticalQuery();

Any help is greatly appreciated as usual!

2

Hey Andrea, happy to help here! Just want to confirm that you are using the search UI React library?
If you want to build a locator you can use 2 different components to query the knowledge graph:

  • FilterSearch - if you only care about applying filters to return results
  • SearchBar - if you want an end-user to use natural language to query results

We generally recommend using FilterSearch for building locators because it allows users to specify the exact location filters they want without relying on our algorithms to interpret what a user might be asking for.

If you go with the FilterSearch component, you can also render the ApplyFiltersButton component, which runs a vertical search under the hood.

When you say your custom button “doesn’t integrate very well” what exactly do you mean here? You should be able to use a custom button that runs a vertical Search without needing to use the ApplyFiltersButton component.

As far as matchers go, we currently support $eq and !$eq, unless you are filtering on a number or date/time field in which case we also support $lt (less than) & $gt (greater than)

Hope that helps!

Daniel

1 Like