我已经使用jQuery UI创建了一个自动完成搜索字段。我可以毫无问题地使用代码,它可以生成并以HTML格式显示结果而不会出现问题。
然而,由于我在网站上使用了更多AJAX功能,并且不想将PHP文件分开以便对MySQL进行查询,因此我希望使用自动完成功能发送2个数据。 1是搜索词本身,另一个是我在php中的函数的名称,因此它可以识别并找到正确的查询并返回数据。
使用这两个版本的代码,我可以在chrome的网络中看到POST成功,我从PHP获得了json编码的结果数组。
但是在版本2中,它没有使用_renderItem为它生成HTML。
提前致谢!
$( "#newInit" ).autocomplete({
source: function(request, response) {
$.ajax({
url: "search.php",
type: "POST",
dataType: "json",
data: {
term : request.term,
f : "item_search"
}
});
},
minLength: 2,
focus: function( event, ui ) {
$( "#newInit" ).val( ui.item.name );
return false;
},
select: function( event, ui ) {
$( "#newInit" ).val( ui.item.name );
$( "#newInit-id" ).val( ui.item.item_id );
$( "#newInit-weight" ).html( ui.item.weight );
$( "#newInit-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<div>Name: " + item.name + "<br>Weight: " + item.weight + "<img width='30' height=30' src='http://url.com/" + item.icon + "'/></div>" )
.appendTo( ul );
};
答案 0 :(得分:1)
在你的ajax功能中添加它,它会将ajax响应传递给自动完成源。
success: function( data ) {
if(data) response( data );
else response({});
}