SearchUI get all results from autocomplete

Elastic Search
1

Hello!

I'm trying to replace my current search bar, located in the header of my React app, using SearchBox from SearchUI.
When a user clicks a match I use onSelectAutocomplete to apply some custom logic to decide what page I redirect them to, which works fine.
But if the user types a partial match and hits enter, I would like to collect all the results and redirect him to a search page, where I display all the results with facets.
I can't figure out how I can get the results so I can forward the user to the search page.

<SearchProvider config={config}>
    <SearchBox
          onSubmit={searchTerm => handleSearch(searchTerm)}
          onSelectAutocomplete={searchTerm => handleSearch(searchTerm)}
          autocompleteMinimumCharacters={3}
             autocompleteResults={{
             sectionTitle: 'Results',
             titleField: 'name',
             shouldTrackClickThrough: true,
          }}
          autocompleteSuggestions={{
              sectionTitle: 'Suggested Queries',
          }}
    />

Also, is there a way to add two fields with custom formatting to titleField? eg. 'name - description'
Any help will be very much appreciated.

Thanks!

2

Hey @adrian_es,

You should be able to override the onSubmit function to redirect the customer to the search page, providing the query in the url. Autocomplete | Elastic docs

<SearchBox
            onSubmit={(searchTerm) => {
              window.location.href = `${PATH_TO_YOUR_SEARCH_PAGE}?q=${searchTerm}`;
            }}
/>
3

Hi, @ joemcelroy!

Thank you for the fast reply.
So if I redirect them to the search page, I need to do another search, not use the existing results?

And one more unrelated question: after the redirect, the search term is not cleared from SearchBox. Can you please tell me how I can clear the search term?
Thanks!

4

So the example I shared above is where the search box is present globally on the site and the onSubmit handler will navigate the user to the global search page. On the search page, the search experience has the search term populated, to reflect the search state.

Is there a reason why you dont want the searchbox to reflect what is the search state?

Joe

5

It makes sense to leave the search term in the search box while on the global search page, but if I navigate away from the search page, the search term still remains in the SearchBox.
In this case, I would like to clear the search term.

Thanks for all the rapid replies!

I have two final questions if you are still able to help, although it's not related to the topic:

  1. is there a way to add two fields with custom formatting to SearchBox titleField? eg. 'name - description'
  2. The facets currently show fields that have empty strings, is there a way to exclude them?

And thanks again!

6

Hey sorry missed this reply!

1- Could you explain more on how you want it to be custom formatted, potentially a screenshot of what you want?
2 - is there a way you can stop indexing empty values into the field? Its not ideal to exclude them at presentation.

joe

7

Hey @joemcelroy ,

  1. the SearchBox autocompleteResults titleField seems to accept only one field.
    But I would like to display two fields. "field1 - field2".
    If I have:
{
  field1: "foo",
  field2: "bar", 
}

When I search for 'foo', I would like to display in the search results: "foo - bar".
As a workaround, I added an extra field that has both values in the format above. Was just wondering if there's a better way to do this.

  1. fixed that by replacing empty values with null.

  2. The thing I couldn't figure out, how to clear the search term from the SearchBox.
    If I navigate away from the search page, the search term isn't cleared from my SearchBox.

Thanks!

8

It makes sense to leave the search term in the search box while on the global search page, but if I navigate away from the search page, the search term still remains in the SearchBox.
In this case, I would like to clear the search term.

9

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