YUI3 - 使用本地图像自动完成

Question

我尝试使用自动完成功能进行输入，但由于我使用表情符号需要在推荐列表中显示图片和文字

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

输出应该是

谢谢!!!

Answer 1

以下是YUI3文档中的一个很好的例子： http://yuilibrary.com/yui/docs/autocomplete/ac-flickr.html?mock=true

此代码最重要的部分是结果格式化程序：

    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

没有用图标等做过类似的事情，但是我先检查result formatter，如果不是“足够好”，我会尝试扩展AutoCompleteBase。 YUI站点的示例：

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

两者都需要进行大量的阅读和实验，但您应该能够根据自己的需要对其进行修改......