我正在尝试使用 jquery 自动完成和自定义 html 在我的下拉列表中添加图像。由于某种原因,当我设置图像时,当我输入名称时,自动完成看起来很好(我看到图片和标签都很好),但是当我向下箭头进行选择时,我收到一条错误,提示 ui.item 是没有为焦点和选择事件定义。如果我遵循示例页面中显示的标准格式,一切都会正常。
(jquery 文档中的一个 - 按预期工作)
.append( "<a>" + item.label + "<br>" + item.value + "</a>" )
但是当我使用这个来显示图像时,自动完成列表会显示图片,但焦点和选择事件不起作用
$( "#friends" ).autocomplete({
minLength: 2,
source: friend_data,
delay: 0,
autofocus: true,
focus: function(event, ui) {
$( "#friends" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#friends" ).val( ui.item.label );
return false;
}
})
.data( "autocomplete")._renderItem = function( ul, item ) {
var fb_pic_path = '<img src="http://graph.facebook.com/' + item.value + '/picture?type=square">' ;
console.log(fb_pic_path);
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( fb_pic_path + item.label )
.appendTo( ul );
};
最佳答案
啊..明白了。需要 anchor 。
.append( "<a>" + fb_pic_path + item.label + "</a>" )
现在工作正常了。
关于jquery autocomplete _renderItem 添加图像标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10868978/