I'm basically copying this example from w3c schools and when you start typing in a name a few suggestions get added. No suggestions are getting added for me.
nameguess.html
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8" />
<title>Ajaxing</title>
<script type="text/javascript">
<!--
function showHint(str)
{
var xmlhttp;
if (str.length == 0)
{
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
//-->
</script>
</head>
<body>
Hello.<br />
<form method="GET" action="">
Name: <input type="text" id="txt1" /><br />
Suggestions: <span id="txtHint"></span>
</body>
</html>
gethint.php
<?php
// Fill up array with names
$a[]="Anna";
//removed code to save space
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
I have both files located in the www folder of WAMP and have the virtual server running.
change this
<input type="text" id="txt1" />
to
<input type="text" id="txt1" onkeypress="showHint(this.value)"/>
and see if this helps
You have missed the key press event binding:
<input type="text" id="txt1" onkeyup="showHint(this.value)">
Also, your PHP could be simplified as
<?php
if(!isset($_GET['q']) exit;
// Fill up array with names
$names = array("Anna", "Vicky");
//get the q parameter from URL
$q=$_GET["q"];
$hints = array();
foreach($names as $name) {
if (stripos($name, $q) !== -1) $hints[] = $name;
}
if(count($hints) == 0) die("no suggestion");
echo implode(', ', $hints);
?>
I can see that others have already answered what you are trying to do but I would suggest not making your ajax requests like that example.
Instead try using the jQuery library to make your ajax requests. I was able to shorten up the code above into this.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$.get(
'gethint.php', //Code behind
{q : $("#txt1").val()}, //json string of variables to post
function(data){$("#txtHint").html(data);}, // What to do with return data
'json'); //Specify json
</script>
It will make life much easier in the long run, because it stinks to have to go through that whole mess and have to worry about cross-browser compatibility.
You can find more information here JQuery