Reactivesearch: Example with Click Auto-suggest To Details Page

[coommark]

First of all, awesome work! Super super!

In typical e-commerce scenarios, when a user is searching for iPhone x, and iPhone x is suggested in the search box, clicking it lands the user on the details page of the phone, not on a search result page. How is this handled with reactivesearch? Is there a plan to add an example of such a usage scenario?

Typically, the search will end when iPhone x is suggested. From there, the react app will take over and (maybe) load the iPhone x from a MySql db or something similar. Any pointers how to achieve this with reactivesearch?

_Edit_
I know of onValueSelected but that does not return any hint as to whether the selected value was from autosuggest or from a query typed by a user. Or does it???

[siddharthlatest]

Thanks @coommark! You bring up a great point, we probably have to change onValueSelected's behavior to tell whether this value is coming from a suggestion (in which case, also pass its entire _source object - where presumably you would have the URI to redirect defined).

This is somewhat related to https://github.com/appbaseio/reactivesearch/issues/381. (I think instead of having strict selections immediately, it's better to pass the info whether the current value was user typed / selected from a hit in the onValueSelected's callback function)

I am also not sure if we fire a search query when using onValueSelected in this manner. But this is one scenario where you wouldn't want the query to be fired, as instead of searching - you are looking to redirect the user to a specific product page. cc @divyanshu013

[siddharthlatest]

Related to #381

[coommark]

Awesome! Y'all rock!

[divyanshu013]

onValueSelected also passes the cause of action now along with the source object if the cause of action was 'SUGGESTION_SELECT'. More info available in the docs 👨‍💻

[coommark]

Hi, first, thanks once again a million. Just implemented this and works perfect!

Now to document this here for anyone who might use this, when you create a custom onSuggestion renderer, the source, etc don't get passed down to onValueSelected, so you have to pass it down like this:

onSuggestion={(suggestion) => ({
    label: (<div><img src = {suggestion._source.image_url} className="mr-2 float-left" width="45"></img> {suggestion._source.name} in <span style={{ color: 'dodgerblue' }}>{suggestion._source.category}</span></div>),
    value:  suggestion._source.name,
    source: suggestion._source
})}

Me, in my handleSearch method, I just check if sourceis null, if yes, I send the user to the search page and pass the query to it. If not, I send the user to the details page of the sourcedocument.

Thanks once again!

[divyanshu013]

Great, will add it to the docs. Thanks!