HTML combo box with option to type an entry

html combobox
birdus picture birdus · Jan 30, 2013 · Viewed 350.6k times · Source

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

Fenton picture Fenton · Jan 30, 2013

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">B</option>
  <option value="-">Other</option>
</select>

<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. In some browsers, e.g. iOS Safari < 12.2, this was not supported or the implementation had issues. Check the Can I Use page to see current datalist support.

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
  <option value="A">  
  <option value="B">
</datalist>

Related questions

How do I style a <select> dropdown with only CSS?

Is there a CSS-only way to style a <select> dropdown? I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in …

Read More
How to pass parameters on onChange of html select

I am a novice at JavaScript and jQuery. I want to show one combobox-A, which is an HTML <select> with its selected id and contents at the other place on onChange(). How can I pass the complete combobox …

Read More
How to get multiple selected values of select box in php?

I have a html form which has a select list box from which you can select multiple values because its multiple property is set to multiple. Consider form method is 'GET'. The html code for the form is as follows: …

Read More