Php JQuery使用JSON自动完成和表单填充

我在使用JSON实现JQuery自动完成时遇到问题。 基本上，我从我的服务器获得一个JSON编码的数据（我使用codeigniter php框架）

JSON格式如下所示：

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

因此，产品（prodname）字段（在图像上的红色矩形中）将显示autcomplete。确定时 选择产品后，将填充ID、代码、类别和计量单位

以下是我的输入字段：

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

                };

$.ajax({
数据类型：“json”，
async:false，
成功：功能（数据）{
项目=数据；
},  
url:“”
});
//自动完成
$（“#prodname”）.autocomplete({
资料来源：项目，
焦点：功能（事件、用户界面）{
$（“#prodname”）.val（ui.item.prodname）；
返回false；
},
选择：功能（事件、用户界面）{
$（“#prodname”）.val（ui.item.prodname）；
$（“#id”）.val（ui.item.id）；
$（“#代码”）.val（ui.item.code）；
$（“#类别”）.val（ui.item.pcname）；
$（“计量单位”）.val（ui.item.uname）；
返回false；
}
})
.数据（“自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“+item.prodname+”）
.附录（ul）；
};

尝试以下方法：

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

尝试以下方法：

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

---

这个例子对你有帮助吗

这个例子对您有帮助吗