Looking for help with creating an autocomplete feature with images on this jsfiddle. Despite trying to capture the event when a user selects an image, it doesn't seem to work properly:
$("#input").autocomplete({
//source: tags,
source: images,
minLength: 1,
delay: 0,
open: function(){
$('.ui-menu .ui-menu-item a').css('word-wrap','break-word');
},
close: function () { $('.ui-autocomplete').show() },
focus: function(event, ui) {
return false;
},
select: function(event, ui){
alert("here there");
return false;
}
}).data("uiAutocomplete")._renderItem = function(ul, item){
//return $('<li style="margin-bottom:2px;"></li>').data("item.autocomplete", item).append('<a>hi there</a>').appendTo(ul);
return $('<li style="margin-bottom:2px;"></li>').data("item.autocomplete", item).append('<a><img src="' + item + '" style="width:115px;"/></a>').appendTo(ul);
};
It seems that capturing the select event only works when returning plain text instead of images. I have also tried adjusting the z-index without success.
EDIT: The corrected link to the jsfiddle has been added.