Displaying a "not found" message in the suggestions

[tstirrat15]

Short description

Above is what happens on google maps when you enter a string that doesn't match a place. There's an event handle exposed for when there are no suggestions returned, but no easy way to provide a "no results found" dropdown result.

I imagine that this could pretty easily be an additional prop. Is there another way to do this that I'm missing?

[santhi-nyros]

Hi, Any update on this?

[ro-ka]

You can hook into the onSuggestNoResults. A class on the suggest list would be a good addition to simplify adding a message via CSS.

Does the callback help already?

[tstirrat15]

@ro-ka I'm aware of the event handle, but that only helps for actions/displays outside of the geosuggest - I was thinking of something that's able to leverage the code and styling already in place to display something in the dropdown. Reimplementing a dropdown to use that hook seems kludgy.

I'm imagining something like a noResultsDisplay prop that is just for the content of the dropdown, or something to that effect.

[ro-ka]

Would a class on the suggest list be enough to style it? Could add text via ::before.

[IsenrichO]

Any updates on this? I'd like to echo @tstirrat15 issue.

[tstirrat15]

@ro-ka the list doesn't render when there are no suggestions, so a ::before wouldn't have an element to attach to.

[ro-ka]

The list does render, it’s just not visible. Another class geosuggest__suggests--no-results could show the list and add a ::before element telling that there are no results. This way it’s completely in the component users hand how to display it. Doing it via JS would mean to add another prop to handle the text to show.

[oyeanuj]

@ro-ka I don't think your suggested solution actually works well for all cases (and feels hackish), having tried it.

I think ideally, like Google Maps, above, you would want the 'No Results' case to be always present incase none of the suggestions match the user's intent. In that case, you'd want that section to be customizable, both in terms of content and interaction. With the ::after or ::before approach, both of those things are not really possible.

I feel like an ideal API would be a parallel to renderSuggestItem, like say renderNoResult, and a click on it would call the callback with the query typed.

Not to harp on an old thread but this thread is continuing the discussion in #74 (comment) which never really got resolved.

Hope the reasoning above for the additional prop makes sense!

[ro-ka]

Thanks for the feedback! We should add the renderNoResult prop then. Would you mind opening a PR for this?