AJAX onkeyup event trigger in php code

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • bartedecout
    New Member
    • Dec 2013
    • 6
    #1

    AJAX onkeyup event trigger in php code

    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:

    Code:
    <html>
    <head>
        <title>
            Brandon's Search Engine
        </title>
        <style type="text/css">
            #suggestion {
                border: 1px solid black;
                visibility: hidden;
            }
            #suggestion a {
                font-size: 12pt;
                color: black;
                text-decoration: none;
                display: block;
                width: 450px;
                height: auto;
            }
            #suggestion a:hover {
                background-color: #dddddd;
            }
        </style>
    </head>
    <script type="text/javascript">
        function getSuggestion(query) {
            var ajax;
            if(window.XMLHttpRequest)//for ie7+, FF, Chrome
                ajax = new XMLHttpRequest();//ajax object
            else
                ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
            ajax.onreadystatechange = function(){
                if(ajax.status == 200 && ajax.readyState == 4) {
                    //if result are not there then don't display them
                    if(ajax.responseText == "")
                        document.getElementById("suggestion").style.visibility = "hidden";
                    else {
                        document.getElementById("suggestion").style.visibility = "visible";
                        document.getElementById("suggestion").innerHTML = alert(ajax.responseText);
                    }
                }
            }
            ajax.open("GET", "suggestion.php?q=<?php echo $query;?>"+q, false);
            ajax.send();
        }
    </script>
    <body>
        <form method="GET" action="search.php">
            <input type="hidden" name="page" value="0" />
            <table align="center">
                <tr>
                    <td>
                        <h1><center>Brandon's Search Engine</center></h1>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <input type="text" name="q" size="90"
                               onkeyup="getSuggestion(this.value)" autocomplete="off" />
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <input type="submit" value="Search" />
                        <input type="reset" value="Clear" />
                    </td>
                </tr>
            </table>
        </form>
        <div id="suggestion" size="90">
        </div>
    </body>
</html>
    Code for suggestion.php:

    Code:
    <?php
include 'connect.php'; //connect with database
$query = $_GET["q"];
if($query != "")
{
$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";
$result = mysqli_query($con,$stmt) or die(mysqli_error($con));
$number_of_result = mysqli_num_rows($result);
if ($number_of_result > 0) {
    //results found here and display them
    while ($row = mysqli_fetch_assoc($result))//show first 10 results
        $title = $row["title"];
        $link = $row["link"];
        echo "<div id='sugg-search-result'>";
        echo "<a href='$link' id='sugg-title'>" . $title . "</a>";
        echo "</div>";
    }
}
?>
    Thanks in advance.
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      line #38, alert() does not have a return value you could asign to innerHTML.

        Comment

        • bartedecout
          New Member
          • Dec 2013
          • 6
          #3
          After deleting the alert(), I still cannot get the suggestion list. Can you help me?

            Comment

            • Exequiel
              Contributor
              • Jul 2012
              • 288
              #4
              instead of ajax.responseTe xt; put xmlhttp.respons eText;

                Comment

                • bartedecout
                  New Member
                  • Dec 2013
                  • 6
                  #5
                  After changing from "ajax" to "xmlhttp" it still does not work

                    Comment

                    • Exequiel
                      Contributor
                      • Jul 2012
                      • 288
                      #6
                      instead of false put true in this part . . ajax.open("GET" , "suggestion.php ?q=<?php echo $query;?>"+q, true);

                        Comment

                        • bartedecout
                          New Member
                          • Dec 2013
                          • 6
                          #7
                          It still does not work.

                            Comment

                            • Exequiel
                              Contributor
                              • Jul 2012
                              • 288
                              #8
                              This is How I code in ajax. . but if you want more easy coding using ajax you can use jquery, , not-jquery ajax
                              Code:
                              function personnel(page)
{
	var year = document.getElementById("pis_archive_year").value;
	var str = document.getElementById("person").value;
	
if (str.length==0)
  { 
  document.getElementById("information").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("information").innerHTML=xmlhttp.responseText;
	
    }
  }
  //alert(str);
xmlhttp.open("GET","assets/pis/PIS_include/pis_search_result.php?q="+str+'*'+page,true);
xmlhttp.send();
}
                              with jquery ajax
                              Code:
                              function onKeyupz()
{
	var str = document.getElementById("searchme").value;
	$.ajax({
		type: "post",
		url: "location/controller.php",
		data:{
			str:str
		},
		success: function(output){
			alert(output);
		}
	});
}

                                Comment

                                • bartedecout
                                  New Member
                                  • Dec 2013
                                  • 6
                                  #9
                                  How can I change my code to these two format of codes? Can you help me?

                                    Comment

                                    Previous template Next
                                    Working...