jquery autocomplete custom result list

So having this next following code:

var obj = $("#search_input").autocomplete({
   minLength: 2,
   source: function(req, add) {
     $.getJSON("do.php", { OP: "news_search", category: cat_id, get: req }, function(results){
       var suggestions = [];
       $.each(results, function(i, val){
         suggestions.push(val)
       });
       add(suggestions);
     });
   },
   select: function(event, ui){
     console.log(ui);
     $("#search_input").val(ui.item.label).attr('data-target', ui.item.value);
     return false;
   }
 }).data("autocomplete");
 obj && (obj._renderItem = function(ul, item) {
   console.log(item);
   return $("<li></li>")
     .data("item.autocomplete", item)
     .append('<p class="autocomplete-list"><img src="'+item.icon+'" alt="Icono Noticia" /> <a>'+ item.label+'</a></div><div class="clearfix"></div><hr size="1"/>')
     .appendTo(ul);
 });
 

As you can see, I am trying to achieve a custom autocomplete result list and by that I mean that on the left of the result list I want to display a photo related with the result, and on the right the text. On click/select it is supposed to set the input field with an extra field data-target where it should contain the article id.

The problem is that I can't get the select to work, I keep getting: d.item is undefined in firebug's console.

Any suggestions?

BTW, I use the var obj = $(...).data("autocomplete"); as it was suggested and accepted on a similar question on stackoverflow, but for me it doesn't work.

---