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?




<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 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



<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;



<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">