Как записать событие select для автозаполнения jquery ui, если у него есть изображения?

Question

У меня есть этот jsfiddle . Я пытаюсь создать автозаполнение с изображениями, и когда пользователь выбирает изображение, я хочу захватить это событие, но по какой-то причине оно не работает с изображениями:

$("#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);
        }; 

Если я вместо этого возвращаю просто обычное текст (просто раскомментируйте эту часть в приведенном выше коде) Я могу зафиксировать событие select, но оно не работает с изображениями? Я также установил z-индекс безуспешно.

РЕДАКТИРОВАТЬ: я исправил ссылку jsfiddle

Answer 1

Вам нужен текст внутри списка:

return $('<li style="margin-bottom:2px;">'+item.label+'</li>').data("item.autocomplete", item).append('<a><img src="' + item + '" style="width:115px;"/></a>').appendTo(ul);

Затем, Вы можете скрыть текст, установив:

li {
  font-size: 0;
}

и отрегулировать .ui-state-active, установив:

a {
  display: block;
}

Answer 2

Я бы посоветовал следующее:

.data("uiAutocomplete")._renderItem = function(ul, item) {
  return $('<li style="margin-bottom:2px;"></li>').data("item.autocomplete", item).append('<div><img src="' + item.label + '" style="width:215px;"/></div>').appendTo(ul);
});

Поскольку вы используете <a>, сначала происходит пузырьковое событие клика, и это не позволяет клику нацелиться на <li> и, следовательно, не триггер select.

Пример использования DIV: https://jsfiddle.net/Twisty/napvj856/28/