[英]JQuery autocomplete and form population using JSON
我在使用JSON实现JQuery自动完成时遇到麻烦。 基本上,我从服务器获取JSON编码的数据(我使用codeigniter php框架)。
JSON格式如下:
[
{
"id": "1",
"prodname": "Candy",
"code": "CND01",
"uname": "grams",
"pcname": "Sweets"
},
{
...
}
]
因此,autcomplete将在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 );
};
尝试类似的方法:
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")]);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.