I’m trying to use a JavaScript type-ahead function to make it easier for users to pick from a dropdown list. The function works fine in a form with no DIVs, but won’t work within the DIV (as shown below). Can anyone suggest how to modify this so that the type-ahead function will work?
Thanks!
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
animatedcollapse.addDiv('interests', 'fade=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>
<script type="text/javascript">
// script to enable type-ahead in a select box
function typeDropdown(typedStr,ddObj) {
var index = ddObj.getElementsByTagName("option");
for(var i = 0; i < index.length; i++) {
if(index[i].firstChild.nodeValue.toLowerCase().substring(0,typedStr.length) == typedStr.toLowerCase()) {
index[i].selected = true;
break;
}
}
}
</script>
</head>
<body>
<div class='content-register'>
<form class='subform' name='form1' method='post' action='signin.html'>
<a href='javascript:animatedcollapse.show(["interests"])' title='show details'><img src='down_arrow.png' border='0' /></a>Interests
<div id='interests' style='width:104%;display:none'>
<input type="text" name="search" onkeyup="typeDropdown(this.value,this.parentNode.dd);" />
<select name="dd">
<option>cars</option>
<option>trucks</option>
<option>motorcycles</option>
</select>
</div>
</form>
</div>
</body>
</html>