jQuery ui autocomplete - renderItem

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
2) modify the _renderItem so that it is not automatically turning strings that look like URLs into href's

Thank you.

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


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

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

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 = [

  source: availableTags