Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to create a combo box (autocomplete list box) - Cross browser compatible

form elements

How to create a combo box (autocomplete list box) - Cross browser compatible

by  BillyRayPreachersSon  Posted    (Edited  )
If you're looking for a cross-browser version of nmath's FAQ (faq216-4818), then this should work for you.

Tested working in IE6, FF1, NN7, and Opera7... and will probably work in most new browsers.

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		function fillin(formObj) {
			var mytext = formObj.elements['mytext'].value;
			sellength = formObj.elements['wholetext'].length;

			for(var i=0; i<sellength; i++) {
				if (formObj.elements['wholetext'].options[i].text.toLowerCase().indexOf(mytext.toLowerCase(),0) == 0) {
					formObj.elements['wholetext'].options[i].selected = true;
					break;
				}
			}
		}

		function filltext(selObj) {
			document.forms['myForm'].elements['mytext'].value = selObj.options[selObj.selectedIndex].text;
		}
	//-->
	</script>
</head>

<body>
	<form name="myForm">
		<input type="text" name="mytext" onkeyup="fillin(this.form);"><br />
		<select name="wholetext" onchange="filltext(this);">
			<option>Red</option>
			<option>Red Flowers</option>
			<option>Green</option>
			<option>Grass</option>
		</select>
	</form>
</body>
</html>

Dan


[link http://www.coedit.co.uk/][color #00486F]Coedit Limited[/color][/link][color #000000] - Delivering standards compliant, accessible web solutions[/color]

[tt]Dan's Page [blue]@[/blue] Code Couch
http://www.codecouch.com/dan/[/tt]
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top