Hi,
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 doesn't seam to have any effect on what is returned.
function formatItem(item, foo, bar, term){
var temp = item.title + '<br /> ' + 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
})
}
})
});