YUI3 - Autocomplete with local images - yui3

Question

I'm trying to make an input with auto-completion but since I 'm working with emoticons need to show a picture and text on the list of recommendations
<div id="demo" class="yui3-skin-sam">
<input id="ac-input" type="text">
</div>
YUI().use('autocomplete', 'autocomplete-filters', 'autocomplete-highlighters', function (Y) {
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
resultFilters : 'phraseMatch',
resultHighlighter: 'phraseMatch',
source : ['Alabama','Alaska','Arizona']
});
});
The output should be something like
thanks !!!

Answer 1

Here is a great example right from the YUI3 Documentation:
http://yuilibrary.com/yui/docs/autocomplete/ac-flickr.html?mock=true
The most important part of this code is the result formatter:
resultFormatter: function (query, results) {
return Y.Array.map(results, function (result) {
return '<div class="result">' +
'<img class="photo" src="' + getImageUrl(result) + '" alt="thumbnail">' +
'<span class="title">' + result.highlighted + '</span>' +
'</div>';
});
}

Answer 2

Haven't done something like that with icons etc. but I would check result formatter first and if it is not "good enough" I would try extending AutoCompleteBase. Example from YUI site:
// HTML template string that will be used for each tweet result.
var tweetTemplate =
'<div class="tweet">' +
'<div class="hd">' +
'<img src="{profile_image_url}" class="photo" ' +
'alt="Profile photo for {from_user}">' +
'</div>' +
'<div class="bd">' +
'<strong class="user">{from_user}</strong>' +
'<span class="tweet-text">{highlighted}</span>' +
'</div>' +
'<div class="ft">{created_at}</div>' +
'</div>';
// Custom formatter for tweets.
function tweetFormatter(query, results) {
// Iterate over the array of tweet result objects and return an
// array of HTML strings.
return Y.Array.map(results, function (result) {
var tweet = result.raw;
// Use string substitution to fill out the tweet template and
// return an HTML string for this result.
return Y.Lang.sub(tweetTemplate, {
created_at : tweet.created_at,
from_user : tweet.from_user,
highlighted : result.highlighted,
profile_image_url: tweet.profile_image_url
});
});
}
// Instantiate AutoComplete using the custom formatter.
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
resultFormatter: tweetFormatter,
resultHighlighter: 'phraseMatch',
resultListLocator: 'results',
resultTextLocator: 'text',
source: 'http://search.twitter.com/search.json?q={query}&callback={callback}'
});
Both will take quite a lot of reading and experimenting, but you should be able to modify it to suit your needs...