How might I cause jQuery Autocomplete to display results with images, and no PHP?

Question

I am implementing jQuery Autocomplete and wish to display results with an associated image. Each image has the same name as the predicted result of the autocomplete field. i.e. If someone types "braz" then "brazil" appears with brazil.jpg inline beside it. I'm having trouble implementing this.

If anyone can point me in the right direction I'd appreciate it. By the way, I'm using Jorn's version.

Am also interested in using smaller versions of autocomplete, but have only found Drew Wilson's and couldn't manage to work it at all.

Answer 1

Look at #suggest4 on this demo page. The formatItem and formatResult functions are used to make the result and the item appear different.

function formatItem(row) {
    return row[0] + " (<strong>id: " + row[1] + "</strong>)";
}
function formatResult(row) {
    return row[0].replace(/(<.+?>)/gi, '');
}

// apply the format functions using the options provided.
$("#country").autocomplete('getdata.jsp', { 
    formatItem: formatItem,
    formatResult: formatResult
};