How to input text in HTML Select Tag?

Question

I want to make input option in select tag so user can choose between options or insert different value.
Is it possible?

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  **<insert user value>**
</select>

Answer 1

HTML solution with "list" attribute:

<input type="text" name="city" list="citynames">
<datalist id="citynames">
  <option value="Boston">
  <option value="Cambridge">
</datalist>

Answer 2

You will have to use javascript to get the additional value. Check this post for some example code:

Jquery dynamically update "other" option in select

Answer 3

Select elements can't contain anything other than option or optgroup elements. Here's a ref to the spec http://www.w3.org/TR/html5/forms.html#the-select-element

You may be better off adding an option for "other" in your dropdown and then using JS to detect for that choice to dynamically show an input (below the dropdown) for a custom value.

Answer 4

Position an input box over the select box and remove the border of the input box. Make the length of the input box shorter than the select box so that the select box may still be used at its end.

Use the oninput event to detect input being entered in the input box. On each keystroke check for a continuing match in the select box. When a match no longer exists there is no further need for the select box.

The server will expect to receive both the text box input, if any, and the select box input, if any, and should use the select value if provided otherwise the input value if provided.