Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Mar 2010
    Posts
    235
    Thanks
    39
    Thanked 6 Times in 6 Posts

    jQuery AutoComplete last step not working

    I'm setting up an autocomplete and I'm close to the end. After the document.ready function, the data array comes back correctly. But no values appear dropping down before the search box. Any thoughts?

    I have firebug open, but I don't see any items related to autocomplete in the review window.

    PHP Code:
    <?php
    session_start
    ();
    ?>
    <html>

    <head>
    <link rel='stylesheet' type='text/css' href='styles.css'>

    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="js/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="js/jquery.bgiframe.min.js"></script>
    <script type="text/javascript" src="js/jquery.dimensions.js"></script>
    <script type="text/javascript" src="js/jquery.autocomplete.js"></script>

    <input type="text" name="searchInput" id="sbox" maxlength="150" size="18" value="" onkeyup="autoc(this.value)">&nbsp;<input TYPE="submit" id="sbox" VALUE="GO!" name="pl"><br />

    <script type="text/javascript">

    function autoc(a){
        new Ajax.Request("calcsave.php?xterm=" + a + "&ajtype=3", 
        { 
        method: 'post', 
                    onSuccess: function(result){
                    r=result.responseText;
    data=r.split("_");
      $(document).ready(function(){
    $("#sbox").autocomplete(data);
      });

                    }
                    
        //postBody: 'name='+ $F('name'),
        //onComplete: showResponse 
        });

    } // end function autoc

    </script>

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Why are you including Prototype? You don't really need it, and it will conflict with jQuery. That might very well be the reason it's not working. Just remove it and write the AJAX request using jQuery syntax.

  • Users who have thanked venegal for this post:

    mathceleb (02-13-2011)

  • #3
    Regular Coder
    Join Date
    Mar 2010
    Posts
    235
    Thanks
    39
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by venegal View Post
    Why are you including Prototype? You don't really need it, and it will conflict with jQuery. That might very well be the reason it's not working. Just remove it and write the AJAX request using jQuery syntax.
    I have that for an old ajax call. I removed it and just wrote this:

    PHP Code:
    <script type="text/javascript">

      $(
    document).ready(function(){
    $(
    "#sbox").autocomplete("calcsave.php?xterm=" "&ajtype=3",data);
      });


    </script> 
    It says "a" is unrecognized. How to I get a to be picked up from sbox value.

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    I didn't suggest getting rid of the AJAX call, but to change it to the jQuery syntax. Obviously you can't just put an URL into the autocomplete function, and neither can you access a variable that has never been defined.

    In your original code, adapt the request using the API reference.

  • #5
    Regular Coder
    Join Date
    Mar 2010
    Posts
    235
    Thanks
    39
    Thanked 6 Times in 6 Posts
    Ok, I got the jQuery working from another tutorial. I just need to know how to float the results box over everything without pushing it down.

    Start typing the letters "eu" in the box in the link below. As you can see, results populate, but the mouseover does not highlight the row, and worse off, the rest of the page is pushed downward. I would like the list to float over the links below the box.

    http://www.mathcelebrity.com/topmenu2.php

    At the top I include this file:
    Code:
    <script type="text/javascript" src="js/jquery-1.5.min.js"></script>
    PHP Code:
    <table><tr>
    <td><div id='tmenu'><a href="index.php" name="top"><img border="0" src="/images/mchotness.gif" alt="Math Celebrity Homepage"></a></td></div>
    <td align='right'>
    <form action="namesearch.php" name="searchForm" method="get"><a href='azlist.php?letter=A' title='Click for Alphabetical Lesson Index' id='quizm' style='color:blue'>A-Z Index</a>&nbsp;&nbsp;
    <a href='pcinst.php' title='Click for Problem Cipher shortcut commands' id='quizm' style='color:blue'>Shortcut Commands</a>
    <input type="text" name="searchInput" id="sbox" maxlength="150" size="18" value="" onkeyup="lookup(this.value)">&nbsp;<input TYPE="submit" id="sbox" VALUE="GO!" name="pl" onblur="fill();">
    <div class="suggestionsBox" id="suggestions" style="display: none;">

    <div class="suggestionList" id="autoSuggestionsList">

    </div>

    </div>



    <script type="text/javascript">

    function lookup(inputString) {

    if(inputString.length == 0) {

    $('#suggestions').hide();

    } else {

    $.post("calcsave.php", {xterm: ""+inputString+""}, function(data){

    if(data.length >0) {

    $('#suggestions').show();

    $('#autoSuggestionsList').html(data);

    }

    });

    }

    }

    function fill(thisValue) {

    $('#sbox').val(thisValue);

    setTimeout("$('#suggestions').hide();", 200);

    }

    </script>


    <?php
    echo "<div id='quizm'>";
    $mcyn=$_SESSION['mcyn'];
    $mcid=$_SESSION['mcid'];
    if (
    $mcyn==|| strlen($mcid)==16){
    echo 
    "Hello, <a href='mcmember.php' title='Click to go to your MyMathCelebrity page'>" $_SESSION['emaddr'] . "</a>";
    echo 
    "<br />";
    // logout link
    echo "<a href='logout.php' title='Click to logout of your MyMathCelebrity account'>Logout?</a>&nbsp;&nbsp;</a>";
    }
    else{
    echo 
    "Status: Guest&nbsp;&nbsp;<a href='login.php' title='Click to login to Math Celebrity'>Login</a> or <a href='signup.php' title='Click to sign up for Math Celebrity'>Sign Up</a>";
    echo 
    "<br />";
    }

    ?>

    Trend:&nbsp;&nbsp;<a href="trend.php?tstopday=1" title="Click to see most popular trends in the last 24 hours">1 day</a>&nbsp;|&nbsp;
    <a href="trend.php?tstopday=3" title="Click to see most popular trends in the last 3 days">3 day</a>&nbsp;|&nbsp;
    <a href="trend.php?tstopday=7" title="Click to see most popular trends in the last 7 days">7 day</a></form>
    </td>


    </tr></table></div>
    And the .css:

    PHP Code:
    .suggestionsBox {

    positionrelative;

    left0px;

    margin0px 0px 0px 0px;

    width180px;

    background-colorblack;

    -
    moz-border-radius7px;

    -
    webkit-border-radius7px;

    border2px solid #000;

    color#FC0;

    }

    .
    suggestionList {

    margin0px;

    padding0px;

    }

    .
    suggestionList li {

     

    margin0px 0px 3px 0px;

    padding2px;

    cursorpointer;

    }

    .
    suggestionList li:hover {

    background-color#DD45CD;


    Last edited by mathceleb; 02-16-2011 at 08:42 PM.

  • #6
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    The div with the id "suggestions" has to be taken out of the flow by positioning it absolutely instead of relatively. If you have problems doing that, please post in the CSS forum, as this doesn't have anything to do with your original request or, for that matter, with Javascript or frameworks any more.

  • #7
    Regular Coder
    Join Date
    Mar 2010
    Posts
    235
    Thanks
    39
    Thanked 6 Times in 6 Posts
    Thanks, I'll repost in the CSS forum.


  •  

    Posting Permissions

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