How can I make this link clickable in JQuery UI Autocomplete? Uncaught TypeError

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 <a> 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 = $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append('<a>' + autocomplete_html+'</a>')
        .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);
      }
   })
  });

Im guessing that you have already found a solution for it, but better late then never.

I know this isn´t the optimal solution, but it works.

$(".yourLink").live('click', function () {
    var yourLinkHref= $(this).attr('href');
    window.location = yourLinkHref;

});

Hope it helps :)

I can find no evidence that this is doable without monkey patching a large part of jquery. YUI3 works spectaculary well, however. No monkeying around necessary

http://developer.yahoo.com/yui/3/autocomplete/