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?

  • 1
    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 '18 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 '18 at 17:55
  • 1
    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 '18 at 6:50
  • 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.
  • 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 '18 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 '18 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 '18 at 18:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.