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