<html>
<head>
<title>Ajax autocomplete using PHP &amp; MySQL</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>
<script src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$("#searchField").change(function(){
			$.ajax({ 
				url: "returnCustomer2.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["scientific"]);
							   $("#txtfamily").val(inval["family"]);
							   $("#txtlocal").val(inval["local"]);

						  });
					}

			});

		});
	});
</script>
</head>

<body>
	<h1>Ajax autocomplete using PHP &amp; MySQL</h1>
	<p id="auto">
		<label>Species: </label>
		<input id="searchField" name="searchField" type="text" />
	</p>
	<p>Family 
	  <label>
	  <input type="text" name="txtfam" id="txtfam">
	  </label>
	</p>
	<p>Local Name 
	  <input type="text" name="txtlocal" id="txtlocal">
	</p>
	<p>&nbsp;</p>
</body>

</html>