Reactivesearch - search from any route

Question

I'm experimenting with ReactiveSearch and using the ReactiveList component.

I'm trying to figure out how I can navigate though my React app and still be able to search.

Say I'm on the home route '/', use DataSearch component for autocomplete and that takes me to the results page '/results but I don't get any results!!

In order to get results, I have to search and stay on the '/results' page. Is there a prop that I'm missing on my DataSearch component in the Header:

<DataSearch
  componentId="SearchSensor"
  dataField={["original_title"]}
  className="search-bar"
  showIcon={true}
  iconPosition="right"
  innerClass={{
    title: "text-title",
    input: "text-input",
    list: "text-item"
  }}
  />

Again, in order to get results, I have to search from the DataSearch component that I have on the results page. Search doesn't work when I have search from the DataSearch component that is in the Header.

So how can I set it to be able to perform a search from any route that I might be on (searching from the DataSearch component that is in the Header for instance)?

Answer 1

Here you would be only using the DataSearch for autocomplete and then redirecting to the results page for the actual results. For this you could use the onValueSelected prop on DataSearch docs:

onValueSelected is called with the value selected via user interaction. It works only with autosuggest and is called whenever a suggestion is selected or a search is performed by pressing enter key. It also passes the cause of action and the source object if the cause of action was 'SUGGESTION_SELECT'.

So you can get the selected value on the homepage, and then use it for doing a search on the results page. This value can be stored in your component's state for doing search or you can add a DataSearch in your results page too and use the URLParams prop to set its value from the url. For example:

Home Page

<DataSearch
  ...
  componentId="q"
  onValueSelected={(val) => Router.push(`?q=${val}`)}  // using nextjs router here for example
/>

Results Page

<DataSearch
  ...
  componentId="q"  // will set its value from the param 'q'
  URLParams
  className="hidden"  // adding some CSS to hide it if not needed
/>

<ReactiveList
  ...
  react={{
    and: ['q']
  }}
/>

Alternatively, you could use the onValueSelected on homepage to set the selected value in state (or store) and then query the ReactiveList on results page with defaultQuery prop docs.