...

View Full Version : jQuery AutoComplete last step not working



mathceleb
02-12-2011, 02: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
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, 10: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, 02:50 AM
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:


<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, 03: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 (http://api.jquery.com/jQuery.ajax/).

mathceleb
02-16-2011, 08: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:

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


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


.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, 08: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, 09:14 PM
Thanks, I'll repost in the CSS forum.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum