Is An Editable Select Box The Right Way?

I have a scenario where a user is emailing another user in an HTML based web app. For the To: field, the user may select one of a pre-defined list of emails OR enter their own igno

Solution 1:

You might try using something like the jQuery autocomplete plugin. This would give you a text box that you could simply enter the email in, but also provide a selectable set of email addresses that could be chosen instead. Fiddling with the settings on the plugin, you could make it so that the set of addresses appears (as a selectable list) once the field gets focus. This has similar semantics to a textbox + select, but I think the interface looks less cluttered.

Solution 2:

The way I like to do these is to make a text input behave like a filter for the dropdown. The user can either select something from the list or type a few characters to filter or keep typing and create a unique string. Put a size property of, say, 6 on the SELECT so that it appears as a selectable list instead of a button.

<div><inputid="mySelectInput type="text" onchange="filterSelect()"/><br/><selectid="mySelect"size="6"><!-- array of options --></select></div>

Then just write your filterSelect() function

Solution 3:

You could go with a mixed approach: a writable field that offers suggestions on addresses while the user writes an address, like Gmail does or I guess other webmail systems.

This way you will show the user his own saved addresses but leave him the chance to write a new one.