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.