Page 1 of 1

Ajax: Enter "shirt" and only "shir" has been passed - why?

Posted: Fri Jan 20, 2012 5:32 am
by simonmlewis
I use Ajax to do a pre-search (like you see on so many sites, including Facebook's search for people at the top.

So as I enter "shirt", shirts begin to appear.

The problem is, it's finding things that are not related to the search, and the reason is, because what I have entered, it's not passed thru immediately.

Enter "shi"..... and the variable is only store the previous storage of "sh", so if I then do "shir", it's just showing "shi".

Here is my *.php file tha Ajax posts to:

Code: Select all

<?php
$q=$_GET["q"];
include "dbconn.php";
$result = mysql_query ("SELECT id, photothumb, price, title, category, catid FROM products WHERE (title LIKE '%$q%' OR description LIKE '%$q%') AND pause = 'off'")or die(mysql_error());
$num_rows = mysql_num_rows($result); 
echo "<div class='presearchbox'>";
while ($row = mysql_fetch_object($result)){
 $title = "$row->title"; 
 $findtitle ="/ /"; 
 $replacetitle ="-"; 
 $titlereplace = preg_replace ($findtitle, $replacetitle, $title); 
 
 $categ = "$row->category"; 
 $findcateg ="/ /"; 
 $replacecateg ="-"; 
 $categreplace = preg_replace ($findcateg, $replacecateg, $categ); 
 
echo "<table class='table' cellpadding='0' cellspacing='0' style='color: #ffffff' width='253px'>

<tr bgcolor='#000000' onMouseOver=\"this.bgColor='#ff0000';\" onMouseOut=\"this.bgColor='#000000';\">
      <td width='80px'>$q<a href='/product/$row->catid/$categreplace/$row->id/$titlereplace'>";
if ($row->photothumb == NULL)
{ echo "<img src='/images/blank.gif' height='60px' style='margin-right: 10px' border='0'/>";}
else { echo "
<img src='/images/productphotos/small/$row->photothumb' height='60px' style='margin-right: 10px' border='0'/>";}

echo "</a></td><td>

<b><a href='/product/$row->catid/$categreplace/$row->id/$titlereplace' style='text-decoration: none'>$row->title</b><br/>$row->category<br/>&pound;";
printf ("%.2f", $row->price);    
echo "</a></td></tr><tr><td colspan='2'><hr noshade size='1' color='#000000' /></td></tr></table>
";
} mysql_free_result($result);
echo "</div>";
mysql_close($sqlconn);
?>
And here is the PHP code at the top of the index file where you type in the box:

Code: Select all

<script>
function precheck(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("srcHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/presearch.php?q="+str,true);
xmlhttp.send();
}
</script>
Why would it only use the previous entry, and not "as you type"?

Re: Ajax: Enter "shirt" and only "shir" has been passed - wh

Posted: Fri Jan 20, 2012 5:40 am
by Celauran
What event triggers the AJAX call?

Re: Ajax: Enter "shirt" and only "shir" has been passed - wh

Posted: Fri Jan 20, 2012 5:45 am
by simonmlewis
As far as I know...

xmlhttp.open("GET","/presearch.php?q="+str,true);

Re: Ajax: Enter "shirt" and only "shir" has been passed - wh

Posted: Fri Jan 20, 2012 5:48 am
by Celauran
No. In #txtHint, some event triggers the JS function call.

Re: Ajax: Enter "shirt" and only "shir" has been passed - wh

Posted: Fri Jan 20, 2012 5:55 am
by simonmlewis
Sorry I have no idea what you are saying. I'm not an Ajax expert by any means.
I'm just confused why it stores only the character entered 'before' rather than current.

Re: Ajax: Enter "shirt" and only "shir" has been passed - wh

Posted: Fri Jan 20, 2012 6:01 am
by Celauran
It's not storing anything, it's reading the value of the #txtHint field when the JS event fires. If the AJAX call is triggered by onkeypress or onkeydown, try changing it to onkeyup.

Re: Ajax: Enter "shirt" and only "shir" has been passed - wh

Posted: Fri Jan 20, 2012 7:35 am
by simonmlewis
B-E-A-U-T-I-F-U-L.

Thanks Celauran.