How can I make this link clickable in JQuery UI Autocomplete? Uncaught TypeError-Collection of common programming errors

I’m trying to use the Jquery UI autocomplete plugin, and i’d like to render some html in the suggest box, with clickable links. The html seems to render ok, however when I click the links, they don’t work and I get in my developer log:

jquery-ui.min.js:239Uncaught TypeError: Cannot call method 'data' of null

Uncaught TypeError: Cannot call method 'data' of null
a.widget._create.menu.a.addClass.appendTo.mousedown.menu.selectedjquery-ui.min.js:239
a.Widget._triggerjquery-ui.min.js:23
a.widget.selectjquery-ui.min.js:252
a.widget._createjquery-ui.min.js:247
f.event.handlejquery.min.js:17
f.event.add.k.i.handle.k jquery.min.js:16

I’m using the following code in the HTML and Jquery side, the syntax is Haml as its in Rails. In the first script tag, I just define a template that I then render with Underscore.js.

This question seems to reference a similar problem, but I don’t understand the answer "I think autocomplete uses an for the element that provides the click event. In that case, you'll need to unset that click handler"

I’d appreciate any guidance! Its been 2 days I’ve been stuck on this. Thanks!

= text_field_tag :search, nil, :class => "jq_watermark", :id => "product-search-input", :title => "Keywords, Tags, Items, SKU..."

%script(type="text/html" id="product-autocomplete-result-template")
  .cell.img
    %img(src='{{ main_image_thumb }}')
  .cell
    %h2= link_to '{{ label }}', CGI::unescape(product_path('{{ id }}'))
    .clear
    = link_to '{{ customer_count }} people have this', '#'
    %span Rating {{ rating }}
    %div{:id => "stars-wrapper-{{ id }}"}
      %select= options_for_select([1, 2, 3, 4, 5])
    %a(href='http://www.google.com') 
      Click Me
  .cell 
    = link_to "I have this", '#', :class => "button"
    = link_to "I want this", '#', :class => "button"

:javascript
  $(document).ready(function(){

    $.ui.autocomplete.prototype._renderItem = function( ul, item ) {
      var template = $('#product-autocomplete-result-template').html();
      var parsed_template = _.template(template, item);
      var target_option = 'value="' + item.rating + '"';    // do simple string replace to select option, as I can't get Jquery
      var selected_option = target_option + ' selected="selected"';
      var autocomplete_html = parsed_template.replace(target_option, selected_option);
      var returnVal = $( "

" )
        .data( "item.autocomplete", item )
        .append('' + autocomplete_html+'')
        .appendTo( ul );
      $("#stars-wrapper-"+item.id).stars({ inputType: "select", disabled: true });
      return returnVal;
    };

    $('#product-search-input').autocomplete({
          delay: 50,
      source: function(request, response) {
        $.ajax({
          url: "#{search_products_path}",
          dataType: 'json',
          data: { term: request.term },
          success: function(data) {
            if (data.length < 1) {
              console.log("Juuusstt right");
              // show submit button
            } else {
              console.log("Too long");
              // hide submit button
            }
            response(data);
          }
        });
      },
      select: function( event, ui ) {
        console.log( ui.item ?
          "Selected: " + ui.item.label :
          "Nothing selected, input was " + this.value);
      }
   })
  });