jquery ui autocomplete - manipulating results

I'm returning multiple pieces of data for each result. In each result I have different link's that I am passing that I'd like to make selectable. Right now no matter where someone clicks on a result it just puts the title into the text box rather than processing the link.

$(function() {
function log(message) {
$("<div/>").text(message).prependTo("#log");
$("#log").attr("scrollTop", 0);

}

$.ajax({
url: "links2.xml",
dataType: "xml",
success: function(xmlResponse) {
 var data = $("ROW", xmlResponse).map(function() {
  return {
    value: $("SC_DF_FIELD_1", this).text(),
    url: $("SC_DF_FIELD_2", this).text(),
    support_url: $("SC_DF_FIELD_3", this).text(),
    description: $("SC_DF_FIELD_4", this).text(),
    contact: $("SC_DF_PERSON_LINK", this).text()

  };
 }).get();

 $("#birds").autocomplete({
  source: data,
  minLength: 0

 }).data( "autocomplete" )._renderItem = function( ul, item ) {
 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=http://someurl.whatever?p_id=" + item.contact + ">Test</a>" + "</a>" )
 .appendTo( ul );
 };

 }
 })

});

So I'd like them to be able to click item.url and it goes there, or item.contact and it goes there.

EDIT:

This is the formatItem code I'm trying out. It does开发者_运维技巧n't seam to have any effect on what is returned.

function formatItem(item, foo, bar, term){
    var temp =  item.title + '<br />&nbsp;&nbsp;' + item.description + '<br />' + '<a href=' + item.url + '>test</a>';
    return temp;

}


    $.ajax({
        url: "links2.xml",
        dataType: "xml",
        success: function(xmlResponse) {
            var data = $("ROW", xmlResponse).map(function() {
                return {
                     value: $("SC_DF_FIELD_1", this).text(),
                     url: $("SC_DF_FIELD_2", this).text(),
                     support_url: $("SC_DF_FIELD_3", this).text(),
                     description: $("SC_DF_FIELD_4", this).text(),
                     contact: $("SC_DF_PERSON_LINK", this).text()

                };
            }).get();

            $("#birds").autocomplete({
                source: data,
                minLength: 0,
                formatItem: formatItem

            })

        }
    })

});

Disabling the click event handler was not difficult and solved the problem.

You should look at http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions , specifically the formatItem and formatResult options.

Use the formatItem option in lieu of your _renderItem hack. Having multiple different links inside of the auto-complete row is a little more complicated. I'd suggest that maybe you just make the formatResult function do nothing and hook onto your custom contact links and what not via .delegate() handler.

Ehh....

The reason that you're having to work around this is because autocomplete isn't designed to have links in the formatted list items. If you look at the source, you'll see that there is a click event handler assigned to the list container, and it returns false on all clicks that happen inside of the list box. With that in mind, a simple .delegate() handler isn't going to fix the problem. You're going to have to first unbind the built-in .click() handler each time it is created. That's a messy hack though, and if you want to do it, I'll let someone else explain it. I'd recommend you just find a different plugin that's meant to work this way or rethink what you're doing.