I'm a programmer working on a web project.

We need the user to select one item from a given list of universities. It's a list of 100+ elements, and the frontend is XHTML/css/js.

Here are the options we came up with:

  • Simple select. Advantages: advanced user could simply type in the beginning of the University name; we are certain (user editing html apart, but we took care of it in validation) the user will select one and only one university. Drawbacks: naive users will have to scroll down the list.

  • Ajax-ish suggestions/autocomplete We already use it for city selection, so it won't be hard to implement. Still, we need to be sure that the input field is one of the list. This might lead to awkward error messages (You have to select one of the items that - er - come out while you're typing the name), but will be faster if the user picks it up immediately.

Which one would you recommend?

Additional info:

  • The site is designed for modern browser and requires javascript to work anyway;
  • The case presented is the only one in which the user would be required to type in exactly one of the ajax suggestions;
  • I am for the first solution, altough I tried to be as unbiased as possible in exposing the problem.
  • Make the Ajax search incredibly forgiving. Assuming this list comes from a table, create a second table of alternate spellings and variations and if one of them is entered return with the authoritative entry. For example, for University of Virginia, you'd have "UVA", "Univ. of Virginia", etc. in the related table. If someone types out "UVA", then the dropdown shows "University of Virginia (UVA)" and "University of Virginia" is popped into the input box. A select box with hundreds of items will be very slow, annoying to use, and awful on a mobile phone. Aug 29, 2012 at 23:17

4 Answers 4


The autocomplete suggestion solution is much better. People don't mind filling of text fields They also struggle with drop downs.

EDIT: For example the autocomplete function on http://www.salary.com as the person types in a city a drop down opens that matches all the possible matches. Then the user picks the one they need.

The reason is that the user already knows the answer to the question and can type it in. A drop down requires 1. Scanning the lines, reading and processing. 2. Figuring out if the answer provided matches that of the one in their mind. 3. Drop downs can disorient users as they try to use their scroll button to shuffle through the items but ends up moving the page, and other mishaps.

  • I know the autocomplete is better ideally. The problem in this one case is, we can't allow users to input anything that does not match perfectly one list item. May 26, 2011 at 22:47
  • Yeah, I get it. From what they type you offer the selection. For example, use salary.com and type in a city.
    – jonshariat
    May 26, 2011 at 22:54
  • @jonshariate, it makes plenty of sense and I think we'll test that. don't you think that in a long form - with that kind of compulsory selection present in just one instance - that could be frustrating? May 26, 2011 at 22:57
  • I see your point. But I think when dealing with a looong list, the user will appreciate the help.
    – jonshariat
    May 26, 2011 at 23:11

Common practices when dealing with long drop down lists (often lists of countries) include:

  • Put the most used options at the top of the list. In country lists, that usually means putting the US, UK, etc at the top of the list since most users will want those.
  • Sort alphabetically. This makes scanning through the list really easy.
  • Make sure the keyboard can be used to select an item. This will work if you use a HTML select tag, but make sure it also works if you implement your own dropdown list.
  • If an item could be spelled different ways, or have synonyms, include them in the list. Make it as convenient and no-nonsense as possible to find my desired item in the list, even if that means putting the same item in there multiple times in different places (so in the case of the first suggestion where US/UK are at the top, still include them in their alphabetical place in the list as well)
  • Autocomplete controls are recommended. Google is your #1 example of how to implement this: it works even if I don't use the autocomplete, but autocomplete enhances my use of the control. Tweak the autocomplete popup so that it doesn't pop up too frequently, but also doesn't take too long to appear - usually this means an onkeyup timeout of around 300ms or so.


  • Do usability testing. We don't know the details or specific requirements of your audience. Find out by having them sit down and try out the control. If there's anything in there that you didn't anticipate, you'll find out in no time.

Some ideas to make the experience even more compelling:

  • Consider how people identify universities other than by name. For instance, the university logo. This could increase scannability of the list.
  • Suggest related universities. For instance, when someone types the name of an Ivy League university, show the others in the list of suggestions. Or show universities in the same state as the one they typed, etc.
  • Consider ways to group the content that makes sense to visitors. For instance, group by state and allow people to jump through the list by typing the state's abbreviation.
  • Thats a great check list for any form!
    – jonshariat
    May 26, 2011 at 22:44
  • What would you think of a two-step (state -> university) selection? May 26, 2011 at 22:48
  • @cbrandolino Sounds great to me, but I live in Europe so I don't really know what I'm talking about. I suggest you prototype it and then grab a random person from the water cooler and see what they think.
    – Rahul
    May 26, 2011 at 23:01
  • I live in Europe too - I assumed you were american and used State instead of Region. Anyway, great answer - I learned a lot and I think I'll save it for future reference. May 26, 2011 at 23:02
  • @cbrandolino Haha. Funny how that works, assuming people are American on the internet. Stupid Americans. ;)
    – Rahul
    May 26, 2011 at 23:06

I would show the whole list and above it keep an input so the user can type to filter down the list. The Label picker in Gmail is one example of this.

In my mind this is different from autocomplete in that the entire list is shown and you can select with the mouse.

  • thought about it, but the whole list would occupy one screen by itself. May 26, 2011 at 23:05

We implemented a dropdown / input field combobox for a similar thing. That way, you offer your users both kinds of interaction:

  1. Click the element to see the list of all options, scroll down and select one, drop-down style. This is useful when you'd like the see the complete list of options to help you decide.

  2. Start typing to manually input an item, with the help of auto-complete. This is useful when you know what you want to select and don't want to waste time scrolling a list.

Regarding the manual input of incorrect values - you don't need to use what the user typed:

  • As user starts typing, show all the items that match the search string, the best match first and highlighted as "selected" and submit that item on user hitting enter (or whichever item the user clicked / used arrow keys to select).
  • If the search is precise enough, the user sees and can submit exactly one option.
  • If the search doesn't match anything, it is impossible to submit a value.

Similar behavior: http://bootstrap-combobox-test.herokuapp.com/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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