...

View Full Version : please help me with my auto suggest function.



LJackson
10-25-2009, 11:28 PM
Hi All

I Have an auto suggest function which 'suggests' the word the user is typing into the textbox and lists the possibilitys from a db column :)

that part works fine,

however when i click a value from the list and hit enter with the focus on the text box i hoped it would link to the value in the db which corosponds to the value selected but it doesnt :(

here is the index page form

<div class="main">
<div id="holder">
<form name="form1" method="post" action="<?php echo $link?>">

Store Search:
<input type="text" id="keyword" tabindex="0"><img src="images/loading.gif" id="loading">
</form> </div>
<div id="ajax_response"></div>
</div>


here is script.js

$(document).ready(function(){
$(document).click(function(){
$("#ajax_response").fadeOut('slow');
});
$("#keyword").focus();
var offset = $("#keyword").offset();
var width = $("#keyword").width()-2;
$("#ajax_response").css("left",offset.left);
$("#ajax_response").css("width",width);
$("#keyword").keyup(function(event){
//alert(event.keyCode);
var keyword = $("#keyword").val();
if(keyword.length)
{
if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13)
{
$("#loading").css("visibility","visible");
$.ajax({
type: "POST",
url: "ajax_server.php",
data: "data="+keyword,
success: function(msg){
if(msg != 0)
$("#ajax_response").fadeIn("slow").html(msg);
else
{
$("#ajax_response").fadeIn("slow");
$("#ajax_response").html('<div style="text-align:left;">No Matches Found</div>');
}
$("#loading").css("visibility","hidden");
}
});
}
else
{
switch (event.keyCode)
{
case 40:
{
found = 0;
$("li").each(function(){
if($(this).attr("class") == "selected")
found = 1;
});
if(found == 1)
{
var sel = $("li[class='selected']");
sel.next().addClass("selected");
sel.removeClass("selected");
}
else
$("li:first").addClass("selected");
}
break;
case 38:
{
found = 0;
$("li").each(function(){
if($(this).attr("class") == "selected")
found = 1;
});
if(found == 1)
{
var sel = $("li[class='selected']");
sel.prev().addClass("selected");
sel.removeClass("selected");
}
else
$("li:last").addClass("selected");
}
break;
case 13:
$("#ajax_response").fadeOut("slow");
$("#keyword").val($("li[class='selected'] a").text());
break;
}
}
}
else
$("#ajax_response").fadeOut("slow");
});
$("#ajax_response").mouseover(function(){
$(this).find("li a:first-child").mouseover(function () {
$(this).addClass("selected");
});
$(this).find("li a:first-child").mouseout(function () {
$(this).removeClass("selected");
});
$(this).find("li a:first-child").click(function () {
$("#keyword").val($(this).text());
$("#ajax_response").fadeOut("slow");
});
});
});

and here is ajax_server.php

<?php
include("config.php");
$keyword = $_POST['data'];
$sql = "select storeName,storeLink from ".$db_table." where ".$db_column." like '".$keyword."%' limit 0,20";
//$sql = "select name from ".$db_table."";
$result = mysql_query($sql) or die(mysql_error());
if(mysql_num_rows($result))
{
echo '<ul class="list">';
while($row = mysql_fetch_array($result))
{
$str = strtolower($row['storeName']);
$link = $row['storeLink'];
$start = strpos($str,$keyword);
$end = similar_text($str,$keyword);
$last = substr($str,$end,strlen($str));
$first = substr($str,$start,$end);

$final = '<span class="bold">'.$first.'</span>'.$last;

echo '<li><a href=\'javascript:void(0);\'>'.$final.'</a></li>';
}
echo "</ul>";
}
else
echo 0;
?>


any idea how i can get the form to load the correct storeLink url??? thanks

Luke

Lamped
10-26-2009, 02:50 AM
There are so many things that can go "a bit funny" with ajax.



header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past

Should be in your php script - I once spent hours losing my temper because the browser kept caching stuff I didn't want it to. Maybe put "cache: false" in your $.ajax() request.

Are you comfortable using telnet to do a manual request to the server? I personally find it a helpful tool for debugging stuff like this. There are probably tools to let you hand-craft a HTTP request and view the raw output, but I don't know.

Also, please don't just put $keyword in your SQL like that. Use mysql_real_escape_string($keyword) -- really basic security.

LJackson
10-26-2009, 11:17 AM
hi mate thanks for your reply,

unfortunatly i know very little about ajax/js, have also never herd/used telnet :(

thanks for your suggestions!!
Luke

Lamped
10-26-2009, 04:07 PM
No problem.

First off though, put those two lines of PHP I showed you right at the top of your PHP file, just under <?php and let me know if anything changes.

Telnet would be something like:

Start | Run | "cmd"
c:\> telnet mydomain.com 80
GET /myscript.php HTTP/1.0
Host: www.mydomain.com
<blank line>

You'll then get the source code direct from your page, including headers. You have to type very carefully though: You can't use backspace! You could save the telnet stuff to a text file and run telnet mydomain 80 <mytelnetscript.txt

Anyway...

LJackson
10-26-2009, 04:29 PM
hi mate,

i entered this at the top of my page

header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past

and im getting

Warning: Cannot modify header information - headers already sent
Warning: Cannot modify header information - headers already sent

so here is my full page code

<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
include("config.php");?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Ajax Auto Suggest </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="i_hate_IE.css" />
<![endif]-->
<SCRIPT LANGUAGE="JavaScript" src="js/jquery.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" src="js/script.js"></SCRIPT>
</HEAD>
<BODY>
<center>
<div class="main">
<div id="holder">
<form name="form1" method="post" action="<?php echo $link?>">
Store Search:
<input type="text" id="keyword" tabindex="0"><img src="images/loading.gif" id="loading">
</form> </div>
<div id="ajax_response"></div>
</div>
</center>
</BODY>
</HTML>

thanks
Luke

LJackson
10-26-2009, 04:34 PM
ok i've half solved it :)

just seen this line in ajax_server.php

echo '<li><a href=\'javascript:void(0);\'>'.$final.'</a></li>

which i replaced \'javascript:void(0);\' with "'.$link.'" and it works if i click on the suggestion, however if i select the suggestion with the arrow keys and hit enter it doesnt :(

not sure why thought

any ideas
Luke

LJackson
10-26-2009, 04:37 PM
here is the index.php page and you will see that when searching for a store e.g ebay if you use the mouse to click on ebay it will take you there but if you use the up and down arrows to highlight ebay and press enter then nothing happens?

LJackson
10-27-2009, 12:54 PM
still havent figured this one out, anyone have any ideas please?

thanks
Luke

Lamped
10-27-2009, 03:22 PM
You should take this to the javascript forum now, the guys there will know a lot more.

LJackson
10-27-2009, 03:56 PM
ok will do's thanks for all your help mate :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum