SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem running JavaScript function inside DIV

    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!


    Code:
    <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. #2
    SitePoint Enthusiast ironikart's Avatar
    Join Date
    Apr 2005
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since you are bringing jQuery into your page you could do it a fair bit easier than the code you posted:

    Code:
    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. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast ironikart's Avatar
    Join Date
    Apr 2005
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mottwsc View Post
    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.
    Try wrapping the code in the following:

    Code:
    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. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did the trick! Thanks for your help, ironikart.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •