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 10 of 10
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts

    Exclamation please help me with my auto suggest function.

    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
    PHP Code:
       <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
    Code:
    $(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 Code:
    <?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

  • #2
    Super Moderator
    Join Date
    Feb 2009
    Location
    England
    Posts
    539
    Thanks
    8
    Thanked 63 Times in 54 Posts
    There are so many things that can go "a bit funny" with ajax.

    PHP Code:
    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.
    lamped.co.uk :: Design, Development & Hosting
    marcgray.co.uk :: Technical blog

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    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

  • #4
    Super Moderator
    Join Date
    Feb 2009
    Location
    England
    Posts
    539
    Thanks
    8
    Thanked 63 Times in 54 Posts
    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...
    lamped.co.uk :: Design, Development & Hosting
    marcgray.co.uk :: Technical blog

  • #5
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    hi mate,

    i entered this at the top of my page
    PHP Code:
    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 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

  • #6
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    ok i've half solved it

    just seen this line in ajax_server.php
    PHP Code:
    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

  • #7
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    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?
    Last edited by LJackson; 10-27-2009 at 04:09 PM.

  • #8
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    still havent figured this one out, anyone have any ideas please?

    thanks
    Luke

  • #9
    Super Moderator
    Join Date
    Feb 2009
    Location
    England
    Posts
    539
    Thanks
    8
    Thanked 63 Times in 54 Posts
    You should take this to the javascript forum now, the guys there will know a lot more.
    lamped.co.uk :: Design, Development & Hosting
    marcgray.co.uk :: Technical blog

  • #10
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    ok will do's thanks for all your help mate


  •  

    Posting Permissions

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