jQuery autocomplete: taking JSON input and setting multiple fields from single field

Question

I am trying to get the jQuery autocomplete plugin to take a local JSON variable as input. Once the user has selected one option from the autocomplete list, I want the adjacent address fields to be autopopulated.

Here's the JSON variable that declared as a global variable in the of the HTML file:

var JSON_address={"1":{"origin":{"nametag":"Home","street":"Easy St","city":"Emerald City","state":"CA","zip":"9xxxx"},"destination":{"nametag":"Work","street":"Factory St","city":"San Francisco","state":"CA","zip":"94104"}},"2":{"origin":{"nametag":"Work","street":"Umpa Loompa St","city":"San Francisco","state":"CA","zip":"94104"},"destination":{"nametag":"Home","street":"Easy St","city":"Emerald City ","state":"CA","zip":"9xxxx"}}}</script>

I want the first field to display a list of "origin" nametags: "Home", "Work". Then when "Home" is selected, adjacent fields are automatically populated with Street: Easy St, City: Emerald City, etc.

Here's the code I have for the autocomplete:

$(document).ready(function(){

$("#origin_nametag_id").autocomplete(JSON_address, {
    autoFill:true, 
    minChars:0, 
    dataType: 'json', 
    parse: function(data) {
        var rows = new Array();
        for (var i=0; i<=data.length; i++) {
            rows[rows.length] = { data:data[i], value:data[i].origin.nametag, result:data[i].origin.nametag };
        }   
        return rows;
    }
}).change(function(){
    $("#street_address_id").autocomplete({
      dataType: 'json',
      parse: function(data) {
        var rows = new Array();
        for (var i=0; i<=data.length; i++) {
            rows[rows.length] = { data:data[i], value:data[i].origin.street, result:data[i].origin.street };
        }   
        return rows;
      }  
    });
}); 

});

So this question really has two subparts: 1) How do you get autocomplete to process the multi-dimensional JSON object? (When the field is clicked and text entered, nothing happens - no list) 2) How do you get the other fields (street, city, etc) to populate based upon the origin nametag sub-array?

Thanks in advance!

Answer 1

Just a quick one, I believe the for loop is wrong here, resulted in nothing displayed in list

    for (var i=0; i<=data.length; i++) {}

it should be

    for (var i=0; i<data.length; i++) {}

less or equal (<=) will resulted in undefined array in rows