fill in 3 fields from autocomplete

fill in 3 fields from autocomplete

I have autocomplete setup on my site.  It uses some ajax functionality to supply the drop downs that is fed back in json in that my selected data is city,state abbr, zip.  What I end up getting is the city field, state field fill in properly, however the zip field is the whole data string.   How do I modify the data that is selected.
Here is my code.

  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="utf-8">
  6.   <title>jQuery UI Autocomplete - Remote JSONP datasource</title>
  7.   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  8.   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  9.   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  10.   <link rel="stylesheet" href="/resources/demos/style.css">
  11. </head>
  12. <body>
  13. <span class="ui-widget">
  14.   <label for="city">Your city: </label>
  15.   <input id="city">
  16. </span>
  17. <span class="ui-widget">
  18.   <label for="state">Your state: </label>
  19.   <input id="state">
  20. </span>
  21. <span class="ui-widget">
  22.   <label for="zip">Your zip: </label>
  23.   <input id="zip">
  24. </span>
  25.   <script>
  26.   $(function() {
  27.     function log( message ) {
  28.       //Split up message by ,  Set city, state, zip
  29.  var arrMessage = message.split(",");
  30.  document.getElementById('city').value = arrMessage[0];
  31.  document.getElementById('state').value = arrMessage[1];
  32.    document.getElementById('zip').value = arrMessage[2];
  33.     }
  34.   $( "#zip" ).autocomplete({
  35.       source: function( request, response ) {
  36.         $.ajax({
  37. dataType: "json",
  38. url : "Ajax.php",  
  39. data : "zip="+document.getElementById('zip').value,
  40.             success: function( data ) {
  41. response( data );
  42.           }
  43.         });
  44.       },
  45.       minLength: 4,  
  46.       select: function( event, ui ) {
  47.         log( ui.item.label);
  48.       }
  49.     });
  50.   });
  51.   </script>
  52. </body>
  53. </html>
Thank you for looking at this.