UI Example: combobox


The Example:
Choose a fruit:
Example Usage:
<style>
	input.combobox
	{
		width: 150px;
	}
	div.combobox
	{
		width: 150px;
		position: absolute;
		height: 120px;
		overflow-y: scroll;
		border: 2px solid black;
		padding:0px;
		margin:0px;
		display:none;
	}
	div.combobox table
	{
		table-layout: fixed;
		border-collapse:collapse;
		width: 100%;
	}
	div.combobox td
	{
		padding: 2px 5px 2px 5px;
		margin: 0px;
		width: 100%;
		border:0px;
		cursor:pointer;
	}
	div.combobox tr.even
	{
		background: #EEE;
	}
	div.combobox tr.odd
	{
		background: #DDD;
	}
	div.combobox td.highlight
	{
		background: #77F;
		color:white;
	}
</style>

<script language="JavaScript" type="text/javascript" src="combobox.js"></script>
<b>Choose a fruit:</b>
<!--It may be a good idea to have a containing div or other element, based on how this script changes the DOM.-->
<div>
	<select id="testcombobox" name="test">
		<option value="cranberry">(This shouldn't matter.)</option>
		<option value="cherry">(This shouldn't matter.)</option>
		<option value="strawberry">(This shouldn't matter.)</option>
		<option value="apple">(This shouldn't matter.)</option>
		<option value="orange">(This shouldn't matter.)</option>
		<option value="bananna">(This shouldn't matter.)</option>
		<option value="pineapple" selected>(This shouldn't matter.)</option>
		<option value="grape">(This shouldn't matter.)</option>
		<option value="tomato">(This shouldn't matter.)</option>
		<option value="lemon">(This shouldn't matter.)</option>
		<option value="lime">(This shouldn't matter.)</option>
		<option value="mango">(This shouldn't matter.)</option>
		<option value="watermelon">(This shouldn't matter.)</option>
		<option value="blueberry">(This shouldn't matter.)</option>
		<option value="raspberry">(This shouldn't matter.)</option>
	</select>
</div>
Post text test.
<script language="JavaScript" type="text/javascript">
	makecombobox( "testcombobox" );
</script>