CODEWITHSUNDEEP
htmluser-interface
Neil Middleton
Neil Middleton

Reputation: 22238

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?

Upvotes: 1

Views: 1923

Answers (3)

tvanfosson
tvanfosson

Reputation: 532515

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.

Upvotes: 2

Robusto
Robusto

Reputation: 31883

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

Upvotes: 1

OverLex
OverLex

Reputation: 2521

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.

Upvotes: 0

Related Questions