Accessing the result field from the searchUI to pass to another api

Elastic Search
1

Hi, I am trying to configure a search with autocomplete. I guess a common use case is where on retrieving the autocomplete suggestions and identifying the search term. For e.g, in the videogames tutorial. You can search for starcraft. You enter starcr, the autocomplete suggests starcraft. I then choose starcraft. I would now like to pass this to another api, say where I can get the price.

I guess I am trying to access the state variable {results} or {result} or I could alternatively also use {searchTerm}.

I have looked at the documentation GitHub - elastic/search-ui: Search UI. Libraries for the fast development of modern, engaging search experiences. but am struggling to get it to work. Anyhelp would be great ! Thanks a lot.

1 Like
2

Hey @mchennupati. You could use the resultSearchTerm or results variables from State.

You can access state variables using the WithSearch component: https://github.com/elastic/search-ui/blob/master/ADVANCED.md#withsearch-1

Does that help?

3

Thanks a lot for getting back so quick.

I should be able to get results and resultSearchTerm through context just as you have in your docs for searchTerm in code below right ?

That should fix it i think. Thanks !

<SearchProvider config={config}  >
{/*SearchProvider exposes the "Context"*/}
  {context => {
// Context contains state, like "searchTerm"
    const searchTerm = context.searchTerm    ;
// Context also contains actions, like "setSearchTerm"
    const setSearchTerm = context.setSearchTerm    ;
return (
<div className="App"        >
{/*An out-of-the-box Component like SearchBox uses State and Actions under the hood*/}
        <SearchBox />
{/*We could work directly with those State and Actions also */}
        <input value={searchTerm} onChange={setSearchTerm} />
</div    >
);
}}
</SearchProvider>
4

The example you provided looks old. If you are on the latest version of Search UI, you will need to use WithSearch to get access to the context.

5

Thanks for that. I managed to get it to work. I also wanted to use your autocomplete out of the box. So this is how I used it, so I don't modify the state within WithSearch but let SearchBox change the searchTerm and resultSearchTerm etc.
Also as a separate question, just to make sure I understood it right, I have to convert all my documents to lowercase to index them and then retrieve them and convert it back to the original string to pass it to another api. Would you have a solution to that or does everyone write their own ? Thanks a lot for all your help again !

return (

  <SearchBox autocompleteSuggestions={true} />

  <WithSearch

    mapContextToProps={({

      searchTerm,

      setSearchTerm,

      results,

      resultSearchTerm

    }) => ({

      searchTerm,

      setSearchTerm,

      results,

      resultSearchTerm

    })}

  >

    {({ searchTerm, setSearchTerm, results, resultSearchTerm }) => {

      return (

        <div>

          <em>{resultSearchTerm} </em> <br />

          {results.map(item => (

            <div>{item.name.raw}</div>

          ))}

        </div>

      );

    }}

  </WithSearch>

</SearchProvider>
6

Great, I'm glad you got it working.

I have to convert all my documents to lowercase to index them and then retrieve them and convert it back to the original string to pass it to another api.

I don't understand this. Why do you have to convert your documents to lowercase?

7

Thanks,

I was referring to this error I get when adding documents to my database using client.indexDocuments on the server side where client = new AppSearchClient(host, apikey)

[‘Fields can only contain lowercase letters, numbers and underscore’].

So i need to convert it to lowercase using regex to use the search and then convert it back to the original to call the appropriate api.

8

I don't have any good suggestions for that. If you'd rather do the work at indexing time (as opposed to run time), then you could add a preprocessing step to add a "rawDocument" field that maintains the original structure of the document.

{
  "id": "1234",
  "field1": "value1",
  "field2": "value2",
  "rawDocument": JSON.stringify({ 
    "id": "1234",
    "Field1": "value1",
    "Field2": "value2"
  })
}
9

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