Let’s turn this Ajax, PHP example into Mobil App

Let’s look at this example http://www.w3schools.com/php/php_ajax_php.asp. Click Here. I modified and changed some of the names in that code but most of it is the same.

Create a file called get_teams.php:

<?php
// Fill up array with names

$a[]='ARI|Arizona Cardinals|NFC-West';
$a[]='ATL|Atlanta Falcons|NFC-South';
$a[]='BAL|Baltimore Ravens|AFC-North';
$a[]='BUF|Buffalo Bills|AFC-East';
$a[]='CAR|Carolina Panthers|NFC-South';
$a[]='CHI|Chicago Bears|NFC-North';
$a[]='CIN|Cincinnati Bengals|AFC-North';
$a[]='CLE|Cleveland Browns|AFC-North';
$a[]='DAL|Dallas Cowboys|NFC-East';
$a[]='DEN|Denver Broncos|AFC-West';
$a[]='DET|Detroit Lions|NFC-North';
$a[]='GB|Green Bay Packers|NFC-North';
$a[]='HOU|Houston Texans|AFC-South';
$a[]='IND|Indianapolis Colts|AFC-South';
$a[]='JAX|Jacksonville Jaguars|AFC-South';
$a[]='KC|Kansas City Chiefs|AFC-West';
$a[]='MIA|Miami Dolphins|AFC-East';
$a[]='MIN|Minnesota Vikings|NFC-North';
$a[]='NE|New England Patriots|AFC-East';
$a[]='NO|New Orleans Saints|NFC-South';
$a[]='NYG|New York Giants|NFC-East';
$a[]='NYJ|New York Jets|AFC-East';
$a[]='OAK|Oakland Raiders|AFC-West';
$a[]='PHI|Philadelphia Eagles|NFC-East';
$a[]='PIT|Pittsburgh Steelers|AFC-North';
$a[]='SD|San Diego Chargers|AFC-West';
$a[]='SEA|Seattle Seahawks|NFC-West';
$a[]='SF|San Francisco 49ers|NFC-West';
$a[]='STL|Saint Louis Rams|NFC-West';
$a[]='TB|Tampa Bay Buccaneers|AFC-South';
$a[]='TEN|Tennessee Titans|AFC-South';
$a[]='WAS|Washington Redskins|NFC-East';
//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."<br>".$a[$i];
}
}
}
}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response="<br>" .$hint;
}

//output the response
echo $response;
?>

Now create showteams.html:

<html>
<head>
<title> Football Names</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script>
function showTeams(str)
{
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("txtTeams").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get_teams.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<p><b>Start typing a name of a NFL team in the input field below:</b></p>
<form>
<input type="text" onkeyup="showTeams(this.value)">
</form>
<p>Suggestions: <span id="txtTeams"></span></p>

</body>
</html>

The key is pointing to JQuery Mobil. To test app start typing a NFL Team. It will display Team Abbeviations. Team Name and Division. Click Here