jQuery AutoComplete last step not working

mathceleb · 02-12-2011, 01:00 AM

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>

venegal · 02-12-2011, 09:05 PM

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.

mathceleb · 02-13-2011, 01:50 AM

Quote:

Originally Posted by venegal

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=" + a + "&ajtype=3",data);

  });





</script>

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

venegal · 02-13-2011, 02:09 AM

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.

mathceleb · 02-16-2011, 07:39 PM

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==1 || 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 {



position: relative;



left: 0px;



margin: 0px 0px 0px 0px;



width: 180px;



background-color: black;



-moz-border-radius: 7px;



-webkit-border-radius: 7px;



border: 2px solid #000;



color: #FC0;



}



.suggestionList {



margin: 0px;



padding: 0px;



}



.suggestionList li {



 



margin: 0px 0px 3px 0px;



padding: 2px;



cursor: pointer;



}



.suggestionList li:hover {



background-color: #DD45CD;



}

venegal · 02-16-2011, 07:52 PM

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.

mathceleb · 02-16-2011, 08:14 PM

Thanks, I'll repost in the CSS forum.