multidimensional json data into different input text boxes through jquery/ajax

Question

I have created an autocomplete searchbox followed by two input text boxes.

Please help me how to assign values of autocomplete's selected values.

For ex. if we select ajax, corresponding price should be assigned to 1003 and role should be assigned to foreign.

My json response which I got from php echo output is :

{
    "users": [
        {
            "name": "ajax",
            "price": "1003",
            "author": "foriegn"
        },
        {
            "name": "jquery",
            "price": "1000",
            "author": "dd"
        },
        {
            "name": "mysql",
            "price": "1000",
            "author": "f"
        },
        {
            "name": "php",
            "price": "1000",
            "author": "abc"
        },
        {
            "name": "php frameword",
            "price": "1000",
            "author": "def"
        },
        {
            "name": "php tutorial",
            "price": "1000",
            "author": "ghi"
        },
        {
            "name": "wordpress",
            "price": "1000",
            "author": "g"
        },
        {
            "name": "wordpress theme",
            "price": "1000",
            "author": "h"
        },
        {
            "name": "xml",
            "price": "1000",
            "author": "j"
        }
    ]
}   

My JavaScript code below :

var counter = 2;
var availableTags = ["php", "php frameword", "php tutorial", "jquery", "ajax", "mysql", "wordpress", "wordpress theme", "xml"];

$("#addButton").click(function () {

    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);

    var roleInput = $('<input/>', {
        type: 'text',
        placeholder: 'Role',
        name: 'Role' + counter,
        id: 'textbox' + counter
    });

    var priceInput = $('<input/>', {
        type: 'text',
        placeholder: 'price',
        name: 'price' + counter,
        id: 'textbox' + counter
    });

    var searchInput = $('<input/>', {
        type: 'text',
        placeholder: 'search',
        name: 'search' + counter,
        id: 'se' + counter
    });

    var hidd = $('<input/>', {
        type: 'hidden',
        name: 'searchhid' + counter,
        id: 'searchhid' + counter
    });



    newTextBoxDiv.append(searchInput).append(roleInput).append(priceInput).append(hidd);

    newTextBoxDiv.appendTo("#TextBoxesGroup");

    $('#se' + counter).autocomplete({
        source: availableTags
    });
    counter++;
});    

Current fiddle setup is at : http://jsfiddle.net/premgowda/UC74L/6/

PS: I am extremely new to Json and jquery. I havent added the json output into my fiddle setup as I am not sure how to do it .

Answer 1

Use jQuery UI autocomlete select event:

http://api.jqueryui.com/autocomplete/#event-select

Once you've got the selected value, find the matching object and select it's others properties. Like this:

for(i = 0; i < users.length; ++i) {
        (users[i].name == selected) {
        break;
        }
}

price = users[i].price;
author = users[i].author;