Combo box in HTML 5 and the HTML 4 equivalent

HTML 5 among the new form objects, includes the combobox to fill a text field from options presented in a list box.

We can achieve the equivalent in HTML 4 with two JavaScript functions.

Combobox in HTML 5

Syntax:

<input type=text list=browsers >
<datalist id=browsers >
   <option> Google
   <option> IE9
</datalist>

To create a combo box, a datalist is associated to a generic or specialized text field.

The attributes which describe the combobox are the respective attributes of <input> and <datalist>.

HTML 4 equivalent

By combining a text field and a list, HTML 4 can produce the equivalent object, but with JavaScript code added.

The onChange JavaScript function can detect the user choice of an option.
It then remains to transfer the selected value to the text field.

HTML code:

<input type="text" id="theinput" name="theinput" />
<select name="thelist" onChange="combo(this, 'theinput')">
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select> 

Reading the list in JavaScript:

var idx = thelist.selectedIndex;
var content = thelist.options[idx].innerHTML;

If we had assigned values to the options the instruction would have been instead:

var content = thelist.options[idx].value;  

Assigning the value to the text field, the identifier of the text field being given by the call to the combo function:

theinput = document.getElementById(theinput);  
theinput.value = content;

The full JavaScript function:

function combo(thelist, theinput)
{
  theinput = document.getElementById(theinput);  
  var idx = thelist.selectedIndex;
  var content = thelist.options[idx].innerHTML;
  theinput.value = content;	
}

This code is sufficient to transmit the selection of an option to the text field but has a shortcoming. The onChange function works only if the option chosen would differ from the displayed option, in other words, if the user wants to choose the first option in the list (or default), onChange becomes ineffective because the user does not change the option.
In this case we can not recover the value and transmit it.

To remedy this, a second function is added, comboInit.

It is associated with the onMouseOut event. When the user displays the list, the first option is transferred into the text field. He can then choose a different option if desired.

This only works when the text field is empty then onChange only become effective.

The HTML code:

<select name="thelist" 
   onChange="combo(this, 'theinput')" 
   onMouseOut="comboInit(this, 'theinput')" > 

The second function:

function comboInit(thelist)
{
  theinput = document.getElementById(theinput);  
  var idx = thelist.selectedIndex;
  var content = thelist.options[idx].innerHTML;
  if(theinput.value == "")
    theinput.value = content;	
}

For a full demo, see the widget:

Combo box Widget

one two three

HTML code

Incorporating to the form a text field and a drop down list:

<input type="text" id="theinput" name="theinput" />
<select name="thelist" onChange="combo(this, 'theinput')" onMouseOut="comboInit(this, 'theinput')" >
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>

JavaScript code

The first function, comboInit, acts at the start when the text field is empty. It assigns the default or first line of the list.
The second function, combo works when the user selects a row in the drop down list.

function comboInit(thelist)
{
  theinput = document.getElementById(theinput);  
  var idx = thelist.selectedIndex;
  var content = thelist.options[idx].innerHTML;
  if(theinput.value == "")
    theinput.value = content;	
}

function combo(thelist, theinput)
{
  theinput = document.getElementById(theinput);  
  var idx = thelist.selectedIndex;
  var content = thelist.options[idx].innerHTML;
  theinput.value = content;	
}