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

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

JSON格式如下：

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

因此，autcomplete会在Product（prodname）字段上显示（在图像上的红色矩形中）。 选择某个产品后，将填充ID，代码，类别和UOM。

这些是我的输入字段：

       Add 

我怎样才能做到这一点？

非常感谢你！

解：

 $.ajax({ dataType: 'json', async: false, success: function(data) { projects = data; }, url: '' }); //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 $( "
" ) .data( "item.autocomplete", item ) .append( "" + item.prodname + "" ) .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")]); });