Автозаполнение JQuery и заполнение формы с использованием JSON

Question

У меня проблемы с реализацией автозаполнения JQuery с использованием JSON. По сути, я получаю данные, закодированные в формате JSON, с моего сервера (я использую php framework codeigniter).

Формат JSON следующий:

[
    {
        "id": "1",
        "prodname": "Candy",
        "code": "CND01",
        "uname": "grams",
        "pcname": "Sweets"
    },
    {
        ...
    } 
]

Итак, автозаполнение идет в поле Product (имя продукта) (в красном прямоугольнике на изображении). Когда определенно продукт выбран, идентификатор, код, категория и единица измерения будут заполнены.

Это мои поля ввода:

<input type="text" name="id" value="" id="id" size="3"  />
<input type="text" name="code" value="" id="code" size="5"  />
<input type="text" name="prodname" value="" id="prodname" size="30"  />
<input type="text" name="category" value="" id="category"  /></td> 
<input type="text" name="quantity" value="" id="quantity" size="3"  /> 
<input type="text" name="uom" value="" id="uom" size="5"  />
<button name="add" type="button" >Add</button>

Как мне этого добиться?

Большое спасибо заранее!

РЕШЕНИЕ:

$.ajax({
        dataType: 'json',
        async: false,
        success: function(data) {
            projects = data;
        },  
        url: '<?php echo site_url('products/autocomplete/no'); ?>'
    });
            //Autocomplete
                $( "#prodname" ).autocomplete({
                    source: projects,
                    focus: function( event, ui ) {
                        $( "#prodname" ).val( ui.item.prodname );
                        return false;
                    },
                    select: function( event, ui ) {
                        $( "#prodname" ).val( ui.item.prodname );
                        $( "#id" ).val( ui.item.id );
                        $( "#code" ).val( ui.item.code );
                        $( "#category" ).val( ui.item.pcname );
                        $( "#uom" ).val( ui.item.uname );
                        return false;
                    }
                })
                .data( "autocomplete" )._renderItem = function( ul, item ) {
                    return $( "<li></li>" )
                        .data( "item.autocomplete", item )
                        .append( "<a>" + item.prodname + "</a>" )
                        .appendTo( ul );

                };

Answer 1

Попробуйте что-то вроде:

var yourJson = {"id":"1","prodname":"Candy","code":"CND01","uname":"grams","pcname":"Sweets"};

$("#your_form input").each(function() {
    var element = $(this);
    element.val(yourJson[element.attr("name")]);
});

Answer 2

Этот пример вам помогает?http://jqueryui.com/demos/autocomplete/#custom-data