By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,650 Members | 812 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,650 IT Pros & Developers. It's quick & easy.

AJAX onkeyup event trigger in php code

P: 6
I am a newbie in AJAX script and javascript. I am using AJAX to get search suggestion when the user type the first letter in the search box. But after typing the AJAX and javascript code, I could not get any suggestion coming out below the search box. I wonder if someone could help me to fix this problem?

By the way, I hope that the suggestion limit would be 5. How can I do this?

Code for index.php:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <title>
  4.             Brandon's Search Engine
  5.         </title>
  6.         <style type="text/css">
  7.             #suggestion {
  8.                 border: 1px solid black;
  9.                 visibility: hidden;
  10.             }
  11.             #suggestion a {
  12.                 font-size: 12pt;
  13.                 color: black;
  14.                 text-decoration: none;
  15.                 display: block;
  16.                 width: 450px;
  17.                 height: auto;
  18.             }
  19.             #suggestion a:hover {
  20.                 background-color: #dddddd;
  21.             }
  22.         </style>
  23.     </head>
  24.     <script type="text/javascript">
  25.         function getSuggestion(query) {
  26.             var ajax;
  27.             if(window.XMLHttpRequest)//for ie7+, FF, Chrome
  28.                 ajax = new XMLHttpRequest();//ajax object
  29.             else
  30.                 ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
  31.             ajax.onreadystatechange = function(){
  32.                 if(ajax.status == 200 && ajax.readyState == 4) {
  33.                     //if result are not there then don't display them
  34.                     if(ajax.responseText == "")
  35.                         document.getElementById("suggestion").style.visibility = "hidden";
  36.                     else {
  37.                         document.getElementById("suggestion").style.visibility = "visible";
  38.                         document.getElementById("suggestion").innerHTML = alert(ajax.responseText);
  39.                     }
  40.                 }
  41.             }
  42.             ajax.open("GET", "suggestion.php?q=<?php echo $query;?>"+q, false);
  43.             ajax.send();
  44.         }
  45.     </script>
  46.     <body>
  47.         <form method="GET" action="search.php">
  48.             <input type="hidden" name="page" value="0" />
  49.             <table align="center">
  50.                 <tr>
  51.                     <td>
  52.                         <h1><center>Brandon's Search Engine</center></h1>
  53.                     </td>
  54.                 </tr>
  55.                 <tr>
  56.                     <td align="center">
  57.                         <input type="text" name="q" size="90"
  58.                                onkeyup="getSuggestion(this.value)" autocomplete="off" />
  59.                     </td>
  60.                 </tr>
  61.                 <tr>
  62.                     <td align="center">
  63.                         <input type="submit" value="Search" />
  64.                         <input type="reset" value="Clear" />
  65.                     </td>
  66.                 </tr>
  67.             </table>
  68.         </form>
  69.         <div id="suggestion" size="90">
  70.         </div>
  71.     </body>
  72. </html>
  73.  
Code for suggestion.php:

Expand|Select|Wrap|Line Numbers
  1. <?php
  2. include 'connect.php'; //connect with database
  3. $query = $_GET["q"];
  4. if($query != "")
  5. {
  6. $stmt = "SELECT * FROM searchengine WHERE title LIKE '%" . mysqli_real_escape_string($con,$query) . "%' OR link LIKE '%" . mysqli_real_escape_string($con,$query) . "%' LIMIT 0 , 10";
  7. $result = mysqli_query($con,$stmt) or die(mysqli_error($con));
  8. $number_of_result = mysqli_num_rows($result);
  9. if ($number_of_result > 0) {
  10.     //results found here and display them
  11.     while ($row = mysqli_fetch_assoc($result))//show first 10 results
  12.         $title = $row["title"];
  13.         $link = $row["link"];
  14.         echo "<div id='sugg-search-result'>";
  15.         echo "<a href='$link' id='sugg-title'>" . $title . "</a>";
  16.         echo "</div>";
  17.     }
  18. }
  19. ?>
  20.  
Thanks in advance.
Dec 6 '13 #1
Share this Question
Share on Google+
8 Replies


Dormilich
Expert Mod 5K+
P: 8,639
line #38, alert() does not have a return value you could asign to innerHTML.
Dec 6 '13 #2

P: 6
After deleting the alert(), I still cannot get the suggestion list. Can you help me?
Dec 6 '13 #3

Exequiel
100+
P: 287
instead of ajax.responseText; put xmlhttp.responseText;
Dec 6 '13 #4

P: 6
After changing from "ajax" to "xmlhttp" it still does not work
Dec 6 '13 #5

Exequiel
100+
P: 287
instead of false put true in this part . . ajax.open("GET", "suggestion.php?q=<?php echo $query;?>"+q, true);
Dec 6 '13 #6

P: 6
It still does not work.
Dec 7 '13 #7

Exequiel
100+
P: 287
This is How I code in ajax. . but if you want more easy coding using ajax you can use jquery, , not-jquery ajax
Expand|Select|Wrap|Line Numbers
  1. function personnel(page)
  2. {
  3.     var year = document.getElementById("pis_archive_year").value;
  4.     var str = document.getElementById("person").value;
  5.  
  6. if (str.length==0)
  7.   { 
  8.   document.getElementById("information").innerHTML="";
  9.   return;
  10.   }
  11. if (window.XMLHttpRequest)
  12.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  13.   xmlhttp=new XMLHttpRequest();
  14.   }
  15. else
  16.   {// code for IE6, IE5
  17.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  18.   }
  19. xmlhttp.onreadystatechange=function()
  20.   {
  21.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  22.     {
  23.     document.getElementById("information").innerHTML=xmlhttp.responseText;
  24.  
  25.     }
  26.   }
  27.   //alert(str);
  28. xmlhttp.open("GET","assets/pis/PIS_include/pis_search_result.php?q="+str+'*'+page,true);
  29. xmlhttp.send();
  30. }
  31.  
with jquery ajax
Expand|Select|Wrap|Line Numbers
  1. function onKeyupz()
  2. {
  3.     var str = document.getElementById("searchme").value;
  4.     $.ajax({
  5.         type: "post",
  6.         url: "location/controller.php",
  7.         data:{
  8.             str:str
  9.         },
  10.         success: function(output){
  11.             alert(output);
  12.         }
  13.     });
  14. }
  15.  
Dec 7 '13 #8

P: 6
How can I change my code to these two format of codes? Can you help me?
Dec 12 '13 #9

Post your reply

Sign in to post your reply or Sign up for a free account.