ReactiveSearch, DataSearch and indexing user query

Question

I'm using the DataSearch from Reactivesearch for an autocomplete feature and I'm trying to figure out how I can take the user's selected query and add that to my autocomplete index hosted at Appbaseio?

When I say user's selected query, I mean a query either typed in OR selected from DataSearch component dropdown list.

Here is what I've come up with so far

<DataSearch
   componentId="SearchSensor"
   dataField={["original_title"]}
   className="search-bar"
   onValueSelected={
     function(value, cause, source) {
       console.log("current value: ", value)
     }
   }
   iconPosition="right"
   innerclassName={{
     list: "text-item"
   }}
   />

The onValueSelected above is taken straight from the docs. It seems that is the property that I need to work with in order to do this. I'm just not sure how to connect it to my Appbaseio ES index?

Answer 1

onValueSelected is the correct approach to get the selected value here. (You can also get the full query with onQueryChange if needed). After getting this selected value in onValueSelected you can index this using a simple fetch request to your elasticsearch index or send it to a backend. There's also a helper library and the docs for rest you can try.

Also I would recommend pulling the indexing logic to a server instead of exposing it on client side since you would need the write credentials in order to perform a write. This would keep your write credentials safer.

For example:

<DataSearch
  ...
  onValueSelected={(value) => {
    fetch('YOUR_SERVER_URL' or 'Elasticsearch URL', { method: 'POST', body: {...} })
  }
/>