birdus birdus - 1 year ago 121
HTML Question

HTML combo box with option to type an entry

I was under the impression you could type into a combo box besides selecting any values already in the list. However, I can't seem to find info on how to do this. Is there a property I need to add to it to allow typing of text?

Answer Source

Before datalist (see note below) you would supply an additional input element for people to type in their own option.

<select name="example">
    <option value="A">A</option>
    <option value="B">A</option>
    <option value="-">Other</option>

<input type="text" name="other">

This mechanism works in all browsers and requires no JavaScript.

You could use a little JavaScript to be clever about only showing the input if the "Other" option was selected.

datalist Element

The datalist element is intended to provide a better mechanism for this concept. Importantly, it has no support in Safari, iOS Safari or Opera Mini. Internet Explorer implementation has some issues too. This information will go out of date, so check Can I Use to see current datalist support for more recent info.

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
    <option value="A">
    <option value="B">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download