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

Question

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

JSON 格式如下：

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

因此，自动完成会出现在 Product(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>

我怎样才能实现这一点？

非常感谢您提前！

解决方案：

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