How to make Search UI show results in a new tab?

[kasibiel (Kasia)]

Hello!

I am new to React, so please excuse me if I am asking a lame question. I would like to set up the Reference UI to show search results (upon pressing the "Search" button) in a new tab or on a new page. How can I achieve that? After spending nearly a day on this I wasn't able to figure out by myself.

Basically, I would like to configure my website so that it shows the search box on the home page, but the search results are displayed on a separate page.

I would appreaciate your assistance.

Thank you!

Kasia

[JasonStoltz (Jason Stoltzfus)]

Hey @kasibiel,

Assuming you have two pages:

/home
/search

/search is where you would have your full Search UI experience, like you see in the Reference UI

/home (or any other page) can simply have a text input in a form that links a user to the /search page with a q parameter populated

Something like:

<form id="searchform">
  <input id="searchtext" type="text" />
  <input type="submit" />
</form>

const searchform = document.getElementById('searchform');
const searchtext = document.getElementById('searchtext');

function submit(event) {
  window.location = `/search?q=${searchtext.value}`
}

searchform.onsubmit = submit;

I don't know if you're using React or not on your home page, I just used vanilla JS here for illustration.

[kasibiel (Kasia)]

Thank you, @JasonStoltz!

That's definitively a step forward from where I was before posting to this forum!

What would be even better, however, would be to provide the rich search box already on the /home page (with all the query suggestions, styling, bells & whistles) and redirect to a /search page with the search box looking exactly the same (and populated with the query) and with all the results listed.

Is that doable? Could you suggest a way to achieve it?

Thank you again,

Kasia

[JasonStoltz (Jason Stoltzfus)]

Hi @kasibiel, apologies for the late reply, I was out for a long break.

Yes, that's totally possible. The SearchBox is ultimately just a form input, so I believe you could use the same strategy as above, just use a SearchBox component rather than a raw form input. You'd also need to use React, rather than raw JS as the example above uses.

One other case you may need to handle is to control what happens when a user selects an autocomplete suggestion. You can use the onSelectAutocomplete prop to explicitly control what happens when a user selects a suggestion. In this case, you'd want to it to redirect to your search page:

   onSelectAutocomplete={(
          selection,
          _,
          defaultOnSelectAutocomplete
        ) => {
          if (selection.suggestion) {
            window.location = `/search?q=${selection.suggestion}`
          } else {
            defaultOnSelectAutocomplete(selection);
          }
        }}