One Search Box:results from different engines in two different tabs

[georgina]

Continuing the discussion from How to implement proximity search in app search:

I am trying to get this to work but am struggling to convert the pseudo code into working code.

Are you able to explain this some more, for a react newbie?

Pseudocode from How to implement proximity search in app search - #11 by JasonStoltz

state = {
  engine: 'engine1'
}
const connector = new AppSearchAPIConnector({
    searchKey: "",
    engineName: this.state.engineName,
    hostIdentifier: ""
});

return  <SearchProvider
  config={{
      apiConnector: connector
  }}
>
   <div>
        <SearchBox />
           <Tab1 id="tab1" onClick={() => setState({ engine: 'engine1' })}/>
          <Tab2 id="tab1" onClick={() => setState({ engine: 'engine2' })}/>
   </div>
</SearchProvider>

[JasonStoltz (Jason Stoltzfus)]

@georgina I put together a quick demo of this: https://codesandbox.io/s/search-ui-tabs-2-different-engines-ubg3g.

This is just a starting point. I think it may be a challenge to get that to work well.

If you can, I'd recommend an alternative approach. I recommend putting all of your documents into a single engine. Use a "type" field for the type of document, rather than putting them into separate engines.

You can then create a "facet" for type, and build your tabs from that "facet". This is the approach we take on elastic.co and it works nicely: https://www.elastic.co/search?q=kibana&size=20.

Hope that helps,

Jason