How to achieve autocomplete selection changing other input text box values

[sugumarclick]

Basically I'm having three text input. First is autocomplete (book name). Second is book price and third is book author. Please help me in changing the 2nd and third input text box values according to the selection of autocomplete input box. Fiddle setup is at http://jsfiddle.net/premgowda/UC74L/6/

Json code below from php echo output

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

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

html code below

<div id='TextBoxesGroup'>
<div id="TextBoxDiv1" class="form-inline control-group">
    <input type='button' value='Add' id='addButton' />
</div>

Please tell me how to achieve this. For ex. If I select, ajax in autocomplete, second input text box should be filled with 1003 and third with "foreign"

[noelthefish]

try something like this

 $('#se' + counter).keydown(function(event) {
    $.each(json.users, function(i, e) {
            if (e.name.search(new RegExp(/$('#se' + counter).val()/i)) != -1){
            $('#price' + counter).val(e.price);
            $('#author' + counter).val(e.author);
        }
    });
});

I would rename your IDs here FROM id: 'textbox' + counter TO id: 'price' + counter