I am trying to come up with an web interface that allows the addition of an item to a list. For simplicity I'll use an example of a list of names which, when selected will be assigned to a club/group.

I originally thought of a drop-down list containing all the names. However if you have a lot of them it can be a pain to go all the way though the list. So then I thought of an auto complete text box which will auto-predict as they type, problems with this would be speculative browsing though the list and the ability to type names which are not in the database.

I wondered two things; Is it a good idea and can you think of a technique that would intersect both UI elements? Perhaps an example of recommendation of something similar that is used?


5 Answers 5


The Chosen javascript plugin may be exactly what you're after. It's a versatile combo-box solution. Elegant, too. Here's a screenshot example.

Chosen screenshot

  • Excellent, that is it. Brilliant.
    – Damien
    Nov 16, 2011 at 15:23
  • Although I won't use that particular plugin for any of my projects (I don't want to add Cocoa to my dependency list), this widget is a very good example of an autocomplete/combobox solution. Thanks! Jan 5, 2012 at 15:30

Sounds like you need a list with all the names, plus an on-the-fly search box on top of it, filtering the list below:

  • When nothing is typed in the search box, it shows all the names below
  • As the user starts typing, the list is filtered, leaving less and less names
  • Once the list is filtered enough, I would allow the user to move all the names in the filtered list (or just a selection) into the desired group.

You can implement the assignment to the group in multiple ways, including drag and drop. I would also use keyboard shortcuts for users that just want to search for a specific name, transfer it with the return key and move on to the next.

  • 1
    I agree with this approach... however if the initial list is over say... 250 items I wouldn't pre-load the whole list for performance reasons.
    – scunliffe
    Jan 12, 2011 at 17:53

The type of ui element you are describing is called a 'combo box', there are some javascript widgets that provide this functionality, notably this one a-la jQuery: http://code.google.com/p/sexy-combo/


It depends on the information that we are talking.

I do not think that AutoComplete would be good if you are already set that the user has to put a specific "value" that you are providing. I feel that would lead to frustration when an user is trying to write an info, and than you stop it from using it.

Solution 1 If you can organise subgroups a solution could be using 2 DropDownList instead than 1.

An example: The first dropdown is active, the second is disabled. In the first the list show job groups related works like, Design and Graphic, Programming, Accounting, Turism etc...

you select the first dropdown and than the second will activate showing the subgroups, like web design, graphic design, video makers etc...

With this you should narrow down your scrolling of information with just two select box.

Solution 2 If you do not have a problem of using javascript, to create a css popup at the activation of a click of a link with all the information showed not in a single row list, but on a multiple rows (maybe in alphabetic order or in subgroups).


Sounds like what is known as "intellisense".

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.