HTML Combo-Box

There is a rather high demand in the web-design world for a functional HTML combo-box. However, it still does not exist. So we are all clear: I am referring to a drop-down list that also allows you to type a value not in the list. Currently, you have to have a drop-down select field and an input field. It looks bad and it is awkward to use. So, I have worked rather hard on making an easy-to-use HTML Combo-Box.

Download

Click here to download the combo-box script. The instructions for use are in the script file.

Example

This is an example of the script in action. What you are seeing is a select box with the first item altered by keypresses while the select field is focused. Tab to or click on the select field. Type and the text will appear as the first item in the list. You can select another item in the list as normal. With another item selected, you can type to change the value - which will change the first value in the list.
NOTE: If you don't have Javascript enabled, this will not work as a combo-box, but will still function as a normal select field.

Choose a color: Red Green Blue

HTML

The HTML to produce that box follows. The parts relating directly to the combo-box code are in red.

	<script language='javascript' src='comboBox.js'></script>
	<form action=''>
	Choose a color:
	<select
		onfocus="return combo_focus(this);"
		onchange="return combo_change(this);"

		onkeydown="return combo_keydown(this, event);"
		onkeypress="return combo_keypress(this, event);"
		onkeyup="return combo_keyup(this, event);"
	>
		<option value=''></option>
		<option value='Red'>Red</option>

		<option value='Green'>Green</option>
		<option value='Blue'>Blue</option>
	</select>
	</form>
	

Note for Opera Users

Opera does not allow for use of the backspace key outside of input and textarea fields. If you press backspace while focused on this combo-box, you will go to the previous page. To fix this, you must edit your keyboard.ini file and change:
Platform Windows-Unix-QNX, Backspace = Backspace | Back
to
Platform Windows-Unix-QNX, Backspace = Backspace