javascript - jquery/ajax を介してさまざまな入力テキスト ボックスに多次元の json データ

Question

オートコンプリート検索ボックスとそれに続く 2 つの入力テキスト ボックスを作成しました。

オートコンプリートの選択された値の値を割り当てる方法を教えてください。

たとえば。ajax を選択した場合、対応する価格は 1003 に割り当てられ、役割は外部に割り当てられる必要があります。

PHPエコー出力から得た私のjson応答は次のとおりです。

{
    "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"
        }
    ]
}   

以下の私のJavaScriptコード：

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++;
});    

現在のフィドルのセットアップは次のとおりです: http://jsfiddle.net/premgowda/UC74L/6/

PS: 私は Json と jquery に非常に慣れていません。方法がわからないため、json出力をフィドルセットアップに追加していません。