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:

// 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

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
for($i=0; $i<count($a); $i++)
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
if ($hint=="")

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

//output the response
echo $response;

Now create showteams.html:

<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>
function showTeams(str)
if (str.length==0)
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (xmlhttp.readyState==4 && xmlhttp.status==200)

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


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