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

Question

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!

rendered autocomplete menu screenshot

= 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);
      }
   })
  });

'unset that click handler' means you return false in the select(). Your autocomplete() code looks right though, perhaps it's somewhere when it renders the autocomplete_html? — Xnake, Jul 05 '11 at 05:04
I think its related to the fact that jqueery autocomplete depends on jquery.ui.menu, and that file binds event handlers to the elements in the auto complete list. Prob is, it also binds them to the ones in my template... I think... — noli, Jul 05 '11 at 05:14
Is it possible that your search data is empty; thus when you render the menuitem via $( "
I'm not sure I understand.. by 'search data' you mean the autocomplete results from the server? no its full.. I think the .data call through the error isn't the one in here, but in jquery.ui.menu. When I comment out the data call in this file here, I still get the same error — noli, Jul 05 '11 at 07:04

Jonas · Answer 1 · 2012-03-06T10:20:06.810

1

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 :)

edited Mar 06 '12 at 10:20

answered Mar 06 '12 at 09:56

Jonas

93
5

Thanks, i left the project a while back, so I can't test this, but I ended up just going with YUI – noli Mar 06 '12 at 21:08
Fair enough. Hopefully it will help someone else with the same issue. – Jonas Mar 07 '12 at 09:31

score 0 · Accepted Answer · answered Jul 06 '11 at 19:41

0

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/

answered Jul 06 '11 at 19:41

noli

15,927
8
46
62

This link is broken. – rooby May 02 '17 at 01:40

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

2 Answers2

Linked