react-autosuggest
react-autosuggest copied to clipboard
Handling empty suggestion list
How do show feedback to the user when the suggestion list is empty? I tried the codepen example you provided but it doesn't work sometimes when you type fast and delete fast. Does the library support empty feedback?
what do you mean by feedback?
No results or something like that
I assume you meant showing feedback in the suggestion list where the results would normally appear.
From a UI standpoint, it could be confusing to display a special result (the feedback) that isn't supposed to be selected, in the way regular results are. Have you seen such inplementation in the wild, where? perhaps showing the feedback below the input field should do fine.
What kind of feedback you want to show. How it should look?
@aberezkin The feedback shown inside the suggestion and one more suggestion is, to add loading indication inside suggestion box.
There is a way to show the loading process without being too hacky.
A loading flag should be switched on when the suggestions are fetched inside the onSuggestionsFetchRequested
and turned off when they are successfully fetched. The loading indicator can be displayed after the search box.
It would look a little messy IMHO to add the indication inside the box, specially with the value also there.
I think all we need here is a prop for something like showSuggestionsWhenEmpty
so we can add some logic to renderSuggestionsContainer
to check if suggestions.length === 0
.
The only idea I have now would be to force suggestions to never be empty (with some kind of dummy suggestion value), and then check for this in renderSuggestionsContainer
as @mmmeff mentioned.