Take the 2-minute tour ×

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?

share|improve this question
livedemo.exadel.com/richfaces-demo/richfaces/comboBox.jsf <- checkout the second example. –  0101 Jan 30 '11 at 20:31
add comment

5 Answers

up vote 5 down vote accepted

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

share|improve this answer
Excellent, that is it. Brilliant. –  Damien Nov 16 '11 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! –  DMac the Destroyer Jan 5 '12 at 15:30
add comment

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.

share|improve this answer
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 '11 at 17:53
add comment

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/

share|improve this answer
add comment

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).

share|improve this answer
add comment

Sounds like what is known as "intellisense".

share|improve this answer
add comment

Your Answer


