YUI3 - Autocomplete with local images

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

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...

Answer 2

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>';
       });
    }