<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Fish landing data management system</title>
<link rel="stylesheet" href="autocomplete.css" type="text/css" media="screen">
<script src="jquery.js" type="text/javascript"></script>
<script src="dimensions.js" type="text/javascript"></script>
<script src="autocomplete.js" type="text/javascript"></script>

<script type="text/javascript">
	$(function(){
	    setAutoComplete("searchField", "results", "autocomplete.php?part=");
	});
</script>
<style type="text/css">
<!--
#wrapper {
		border: 1px solid black;
		background-color: #E0E0EF;
		color:#FFFFFF;
		padding:10px;
        height:800px;
        width:1024px;
		text-align:center;
    }
.stylewhite {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #FFFFFF;
}
.stylewhitesmall {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}
.stylegreen {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #00661F;
}
.styleblack {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}
.styleblacklarge {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #000000;
}
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
a:hover {
	color: #FF0000;
	text-decoration: none;
}
a:active {
	color: #FFFFFF;
	text-decoration: none;
}
.style1 {color: #FF0000}
.styletextbox {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color:#000000; }
.style36 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; }
.style37 {color: #FFFFFF}
.style38 {
	color: #CC0000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
}
-->
</style>
<script src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$("#searchField").change(function(){
			$.ajax({ 
				url: "returnCustomer1.php" ,
				type: "POST",
				data: 'sCusID=' +$("#searchField").val()
			})
			.success(function(result) { 

				var obj = jQuery.parseJSON(result);
				
					if(obj == '')
					{
						$('input[type=text]').val('');
					}
					else
					{
						  $.each(obj, function(key, inval) {

							   $("#searchField").val(inval["CustomerID"]);
							   $("#txtName").val(inval["Name"]);
							   $("#txtEmail").val(inval["Email"]);
							   $("#txtCountryCode").val(inval["CountryCode"]);
							   $("#txtBudget").val(inval["Budget"]);
							   $("#txtUsed").val(inval["Used"]);

						  });
					}

			});

		});
	});
</script>
<style type="text/css">
<!--
.styleblack {	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}
-->
</style>
</head>
<body>
<h2>jQuery Auto fill auto query</h2>
<table width="455" border="0" cellpadding="1" cellspacing="1" bordercolor="#000000">
  <tr>
    <td width="104">&nbsp;</td>
    <td width="153"><p id="auto"><input id="searchField" name="searchField" type="text" /></p>	</td>
  </tr>
  <tr>
    <td>Name</td>
    <td><input type="text" id="txtName" name="txtName" size="20"></td>
  </tr>
  <tr>
    <td>Email</td>
    <td><input type="text" id="txtEmail" name="txtEmail" size="25"></td>
  </tr>
  <tr>
    <td>CountryCode</td>
    <td><input type="text" id="txtCountryCode" name="txtCountryCode" size="2"></td>
  </tr>
  <tr>
    <td>Budget</td>
    <td><input type="text" id="txtBudget" name="txtBudget" size="5"></td>
  </tr>
  <tr>
    <td>Used</td>
    <td><input type="text" id="txtUsed" name="txtUsed" size="5"></td>
  </tr>
</table>

</body>
</html>
