JQuery自动填充和使用JSON的表单填充

Question

我遇到了使用JSON实现JQuery自动填充的麻烦。 基本上，我从我的服务器（我使用codeigniter php框架）得到一个JSON编码的数据。

的JSON格式如下：

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

所以，autcomplete那张产品（PRODNAME）字段（红色矩形图像）。当选择某个产品时，会填入ID，代码，类别和UOM。

这些都是我的输入字段：

<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> 

我怎样才能做到这一点？

非常感谢您提前！

SOLUTION：

$.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

请问这个例子中，你帮助吗？ http://jqueryui.com/demos/autocomplete/#custom-data

Answer 2

试着这么做：

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")]); 
});