Is an editable select box the right way?

Question

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 ignoring the pre-defined options.

What would be the best way of doing this from a UI point of view? I've looked at editable select boxes using jQuery but none seem to let you enter your own option.

Is there some other UI mechanism that would work here?

Answer 1

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.

Answer 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>
  <input id="mySelectInput type="text" onchange="filterSelect()"/><br/>
  <select id="mySelect" size="6">
    <!-- array of options -->
  </select>
</div>

Then just write your filterSelect() function

Answer 3

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.