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?
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>
in HTML, you do this backwards: You define a text input:
<input type="text" list="browsers" />
and attach a datalist to it. (note the list attribute of the input).
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
This link can help you: http://www.scriptol.com/html5/combobox.php
You have two examples. One in html4 and other in html5
HTML5
<input type="text" list="browsers"/>
<datalist id="browsers">
<option>Google</option>
<option>IE9</option>
</datalist>
HTML4
<input type="text" id="theinput" name="theinput" />
<select name="thelist" onChange="combo(this, 'theinput')">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
function combo(thelist, theinput) {
theinput = document.getElementById(theinput);
var idx = thelist.selectedIndex;
var content = thelist.options[idx].innerHTML;
theinput.value = content;
}