Is the editable select box the right way?

Question

I have a scenario where a user sends an email to another user in an HTML based web application.

In the To: field, the user can select one of the predefined lists of letters or enter his own, ignoring the predefined parameters.

What would be the best way to do this from a user interface perspective? I looked at editable checkboxes using jQuery, but none of them allow you to enter your own option.

Is there any other user interface mechanism that will work here?

Answer 1

You can try using something like jQuery autocomplete . This will give you a text box in which you can simply enter your email address, but you can also select the selected set of email addresses that you could choose instead. Using the plugin’s settings, you can make it display a set of addresses (like a selectable list) when the field becomes focus. This has similar semantics with the + select text box, but I think the interface looks less cluttered.

Answer 2

The way I would like to do this is to make text input as a filter for the drop-down list. The user can either select something from the list or enter several characters to filter or continue entering and create a unique line. Put a size property of, say, 6 in 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 the filterSelect () function

Answer 3

You can use a mixed approach: a recording field that offers suggestions for addresses, while the user writes down an address, such as Gmail, or I think other email systems.

Thus, you will show the user your saved addresses, but leave him the opportunity to write a new one.