jQuery ui autocomplete - renderItem

Question

I am using _renderItem to modify the result list

.data( "autocomplete" )._renderItem = function( ul, item ) {
            var temp = item.url.substring(16, item.url.length)
            return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.value + "<br>" + item.url + "<br>" + item.description + "<br>" + "Support URL: " + item.support_url + "<br>" + "Contact: " + "<a href=" + item.contact + ">Test</a>" + "<br />" + "</a>"  )
            .appendTo( ul )

This has the behavior of automatically marking up anything that looks like a url as an href. I'd like to make the entire item a link

in an older autocomplete that was done like this:

 .result(function(event, item) {
   location.href = item.url;
  });

But this does not seam to be supported any longer.

Does anyone know how I can either:

1) use something similar to the .result function and just make the entire item a link
or
2) modify the _renderItem so that it is not automatically turning strings that look like URLs into href's

Thank you.

Can you write code within autocomplete's open event to CHANGE the markup of items already rendered? — user191966
– user191966, Commented Jan 27, 2012 at 20:47

Gustav · Accepted Answer · 2013-01-30 15:44:09Z

10

It seems, that this has changed in a previous version. Now you have to use

$element.data('uiAutocomplete')._renderItem()

answered Jan 30, 2013 at 15:44

Gustav

1091 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Artem Koshelev Over a year ago

Oh, thanks a lot! Shame it is not covered in API docs

Oliver Lloyd Over a year ago

This works but the current documented approach is to create your own custom autocomplete by extending widgets. See my answer below.

Oliver Lloyd · Accepted Answer · 2014-06-22 10:18:47Z

5

A better approach to customising jQuery's autocomplete is to create your own extended version using widgets.

$.widget( "custom.mySpecialAutocomplete", $.ui.autocomplete, {
  // Add the item's value as a data attribute on the <li>.
  _renderItem: function( ul, item ) {
    return $( "<li>" )
      .attr( "data-value", item.value )
      .append( $( "<a>" ).text( item.label ) )
      .appendTo( ul );
  },
  // Add a CSS class name to the odd menu items.
  _renderMenu: function( ul, items ) {
    var that = this;
    $.each( items, function( index, item ) {
      that._renderItemData( ul, item );
    });
    $( ul ).find( "li:odd" ).addClass( "odd" );
  }
});

var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];

$('#myElement').mySpecialAutocomplete({
  source: availableTags
});

answered Jun 22, 2014 at 10:18

Oliver Lloyd

5,0247 gold badges37 silver badges55 bronze badges

2 Comments

Pistos Over a year ago

"better approach" -- how about "only approach that works". Everything I tried from older syntaxes I found around the Internet did nothing at all. This widget extension syntax is the only one that worked for me. Thanks for sharing. It's unfortunate that the jQuery docs for _renderItem did not contain a full example like you give here.

Mcile Over a year ago

Uncaught TypeError: this.source is not a function

Alex M. · Accepted Answer · 2012-02-01 09:46:45Z

3

When you define your autocomplete, use the select function to create your link:

$('selector').autocomplete({
    source: ...,
    select: function(event, ui) { window.location = ui.url; }
});

answered Feb 1, 2012 at 9:46

Alex M.

514 bronze badges

Collectives™ on Stack Overflow

jQuery ui autocomplete - renderItem

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related