Problem running JavaScript function inside DIV

JavaScript
1

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

Since you are bringing jQuery into your page you could do it a fair bit easier than the code you posted:


jQuery('#search').bind('keyup',function(){
    var checkedValue = jQuery(this).val();
    jQuery('#dd option:contains("' + checkedValue + '")').attr('selected',true);
});

JS Fiddle

It’s not perfect, you would fine use-cases where this would go awry, but I think it communicates the idea. I’d be less inclined to use inline javascript as it makes your code alot more difficult to manage.

3

Thanks for your suggestion, ironikart. I can see that the example works in JS Fiddle. I’ve copied and pasted it as is in my test program to try it and I can’t get it to work. I’ve put the jQuery code after I bring in jQuery by wrapping it like the other script I have. Is there something special I would need to do to make it work in a standalone page? Thank you.

4

Try wrapping the code in the following:


jQuery(document).ready(function(){
 //... code goes here
});

Then the code will be run only when the DOM is ready.

Also, remove the ‘onkeyup’ attribute from your input field, and make sure it has the id attribute added (which I did in that quick example).

5

That did the trick! Thanks for your help, ironikart.

6

I’m a bit late to the thread here, but there’s a neat jQuery plugin called Chosen that automatically converts select fields in to type-ahead selections.