Feature: Improve UI/Ux of suggestions for DataSearch and CategorySearch

[siddharthlatest]

Issue Type:

Enhancement

Platform:

ReactiveSearch for Web

Description:

Incorporate different UI/Ux improvements to make the suggestions UI more palatable:

1. Use more symmetry in how the suggestions are displayed,
2. Add subtle highlighting,
3. Check for spacing and padding.

Screenshots:

Minimal reproduction of the problem with instructions:

Reactivesearch version: x.y.z

Browser: [all | Chrome XX | Firefox XX | Edge XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Anything else:

[siddharthlatest]

Concrete things we can add here:

• [ ] Highlighting support
• [ ] Show each suggestion within a single line row (only search on the visible i.e. truncated value we show on click)
• [ ] Active suggestion (via hover or keypress) should be highlighted
• [ ] Add a renderSuggestion prop which expects an object to be returned (similar to ResultList and ResultCard) like

  {
  "image": <url_to_image>,
  "title": some title,
  "description": some description,
  "url": "href to redirect to on click"
  }

• [ ] renderSuggestion prop can also take back a JSX giving user more control of what to render within each list item.

[divyanshu013]

If we're changing the default behavior this would be a breaking change 💣

[metagrover]

Show each suggestion within a single line row (only search on the visible i.e. truncated value we show on click

This is a major UX flaw. I don't think we should truncate the suggestions in the first place. But if we want this functionality to be plugged in, it should be prop driven. Also, executing the query on the truncated value just introduces more ambiguity in the app. As the screen resolution changes, the truncated value will change, which means, I will have different results on mobile and different on desktop for a single suggestion.