title: jQuery search JSON and populate form fields
body: <p>I've trawled Stackoverflow and the web in general looking for an answer to this. I've found some good suggestions (e.g <a href="http://af-design.com/blog/2010/05/12/using-jquery-uis-autocomplete-to-populate-a-form/" rel="nofollow">http://af-design.com/blog/2010/05/12/using-jquery-uis-autocomplete-to-populate-a-form/</a>) but can't get any to work ... completely due to my ignorance!</p>
  
  <p>I have a JSON file containing a Locality, State and Postcode data (shortened version):</p>
  
  <pre><code>[
      {
        "PCODE":7255,
        "LOCALITY":"LOCCOTA",
        "STATE":"TAS"
      },
      {
         "PCODE":7255,
         "LOCALITY":"LUGHRATA",
         "STATE":"TAS"
      },
      {
         "PCODE":7255,
         "LOCALITY":"MEMANA",
         "STATE":"TAS"
      }
  ]   
  </code></pre>
  
  <p>Basically I want to allow a user to enter a Locality into a form field and then have jQuery search the JSON file, find a match for Postcode and State and use those matching values to populate Postcode and State form text fields</p>
  
  <p>Here's the form I'm using plus some test jQuery pulled from <a href="http://af-design.com/" rel="nofollow">http://af-design.com/</a> (which I can't get to work - my fault, not source script):</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;&lt;/title&gt;
  
  &lt;style&gt;
      label{
     float:left;
     width:80px;
  }
  
  &lt;/style&gt;
  
  &lt;link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css"     media="all" /&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"   type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function(){
  var ac_config = {
      source: "p-codes.json",
      select: function(event, ui){
          $("#city").val(ui.item.LOCALITY);
          $("#state").val(ui.item.STATE);
          $("#zip").val(ui.item.PCODE);
      },
      minLength:1
  };
  $("#city").autocomplete(ac_config);
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;form action="#" method="post"&gt;
   &lt;p&gt;&lt;label for="city"&gt;City&lt;/label&gt;&lt;br /&gt;
       &lt;input type="text" name="city" id="city" value="" /&gt;&lt;/p&gt;
   &lt;p&gt;&lt;label for="state"&gt;State&lt;/label&gt;&lt;br /&gt;
       &lt;input type="text" name="state" id="state" value="" /&gt;&lt;/p&gt;
   &lt;p&gt;&lt;label for="zip"&gt;Zip&lt;/label&gt;&lt;br /&gt;
       &lt;input type="text" name="zip" id="zip" value="" /&gt;&lt;/p&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help or suggestions would be much appreciated!</p>
  
  <p>Regards,</p>
  
  <p>Mekong</p>