HTML Select and Text Input

Question

We have all seen countless instances of forms with a select drop down having one of it's options as "Other" and on choosing that option, we get to see a input text box (which was hidden all along) asking us to type in our input.

Is there a better way to implement this? Are there plugins out there which will let me do this better? Or are standard HTML elements suffice (some setting to a select tag, may be) ?

Answer 1

You could use datalist. Example:

<input list="cookies" placeholder="Type of Cookie"/>

<datalist id="cookies">
    <option value="Chocolate Chip"/>
    <option value="Peanut Butter"/>
    <option value="Raisin Oatmeal"/>
</datalist>

Fiddle: http://jsfiddle.net/joshpauljohnson/Uv5Wk/

This gives the user the ability to select from a list of cookies and, if the type of cookie they seek is not found in the list, enter their own.

My only beef with it in your situation is that it may not be immediately obvious to the user they can use it as a drop down. But that could be easily remedied with a little bit of css.