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 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?

---

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.

---

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

---

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.