jQuery adding html to the results

Question

my input array has:

results[num_row] = {
    'title': title,
    'url': url,
    'support_url': support_url,
    'description': description,
    'contacts': contacts
};

I get the results back:

function formatItem(item){
   var highlight = $.Autocompleter.defaults.highlight;
   var temp = '<span class="title">' + highlight(item.title, term)  + '</span>';
   temp += '<br />&nbsp;&nbsp;' + item.description;
   return temp;
} 

function prep(){
$("#searchbox").autocomplete(results,{
    width:500,
    scroll:false,
    formatItem: formatItem,
    highlight: false

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

I'd like to be able to add tags to what is being returned so that I can override the colors using css. For example I'd like to do something like:

formatItem: function(item) {
    var temp = '<span class="title">' + item.title + </span> + '<br />&nbsp;&nbsp;' + <span class="description"> + item.description + </span>;
    return temp;
}

When I try adding the tags inline like that, it changes the input search critera to having that literal tag. So I have to actually type <span class="title">Search String in order to search instead of Search String.

Thank you.

Answer 1

Your function is being run through options.highlight afterwards. Try specifying a highlight function which returns the source string:

$("#searchbox").autocomplete(results, {
    formatItem: function(item, foo, bar, term) {
        var highlight = $.Autocompleter.defaults.highlight;
        var temp = '<span class="title">' + highlight(item.title, term)  + '</span>';
        temp += '<br />&nbsp;&nbsp;' + item.description;

        return temp;
    },

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

Be sure you're escaping item.title to prevent XSS attacks!