Combining a drop-down with autocomplete and search



  • Recently I was faced with the following dilemma. By trying to combine a drop-down that must contain items with a top search/type field (autocomplete and search) inside of the drop-down I realised that the user may get confused. Despite I know this piece of Ui is used in many websites and applications what is your opinion when after you select and choose an option you must also display the results.

    I attach my case study examples.

    Case 1

    Case 2

    Case 3

    Case 4



  • This is where a proper label helps. In your example, you have no labels above to indicate what you're asking the user to select.

    You're correct in that this is a common UI control. You have a couple of abilities and indicators you can add here; allowing a 'clear' function, and proper labeling.

    You don't need the additional 'please select' instructions inside the dropdown. If it's a complex instruction or reason, you can make the label clearer, or even add 'hint text' below the dropdown, so users can have some clarity.

    enter image description here



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2