What are the best UX practices to show that an autocomplete data for an input field in a form is loading?

Question

I'm a developer working on a form, which fills an autocomplete input field with available choices.

What would be the a good UX take to show that those suggestions are loading?

I'm thinking on disabling the field and showing a small loading spinner over the input field.

Any ideas or examples?

I don’t think this is called autocomplete, just suggestions (or autosuggest maybe). Disabling the input will probably not deliver great UX. Just load suggestions below in a dropdown. The spinner is fine btw, you could add a text like “loading suggestions”, that way people don’t just know something is loading but also what is loading. — jazZRo, Jul 1, 2018 at 7:16
I agree. I'm leaving it always enabled now. Still not very satisfied with my loading spinner over it though. Like you said, seems lacks information on what it's loading. I don't want to put a "loading suggestions" text because I think it would block the input (if you mean putting this over the field). — kaneda, Jul 1, 2018 at 17:55
Obstructing is practically the same as disabling the field. What I meant is to show the spinner in the dropdown with the text. Expand the dropdown to the amount of suggestions that are found. — jazZRo, Jul 2, 2018 at 6:50

mentallurg · Accepted Answer · 2018-07-01 14:06:10Z

2

Limit the number of possible completions to relatively short list, 5 to 10, depending on your device and screen size.
Give user the possibility to pick them by mouse, by keyboard, by tapping. For keyboard, make sure this doesn't trigger the search, but just adds the selected word into the input field.
After user selected one of completions, consider if further completions make sense and show them. E.g. if input is "des", completion can be "design". After user selected "design" from the auto completion list, you can suggest "design tools", "design tutorials", "UX design". Then user may select one of them. Etc.
Don't trigger search after user selected one of completions. User may want to modify suggested word or add his own words.
Trigger search only after user clicked or tapped the button or pressed Enter key.

answered Jul 1, 2018 at 14:06

mentallurg

7874 silver badges9 bronze badges

What about the moment before, when the suggestions are still loading for this input field? ATM I leave the input field always enabled but I put a loading spinner o the right hand side of it.
– kaneda
Jul 1, 2018 at 17:51
User can still input what he wants even when suggestions didn't come up yet. I validate what he entered later.
– kaneda
Jul 1, 2018 at 17:58
1

* I leave the input field always enabled but I put a loading spinner o the right hand side of it.* - this is fine. We don't have to force user to wait for auto completion entries. It is up to user to wait or not to wait.
– mentallurg
Jul 1, 2018 at 18:17

Add a comment |

1 Answer 1