带图像和页脚的Typeahead.js

Question

我刚刚下载了typeahead.js插件，我想知道如何在我的搜索结果旁边显示一个图像(类似于它在typeahead.js主页上的显示方式)，以及在每个搜索结果下面显示一个小页脚。

我的想法是，我的搜索结果将有一个绿色，琥珀或红色的圆圈旁边的每个结果与一些小页脚文字下面。

有人能告诉我这方面的工作例子吗？typeahead.js页面不显示带有图像的示例。

谢谢

Answer 1

<div class="ProfileCard u-cf Typeahead-suggestion Typeahead-selectable">
    <img class="ProfileCard-avatar" src="https://pbs.twimg.com/profile_images/378800000017912577/de7d4a2860762bd2f7d7dbef3c2385ee_normal.gif">

    <div class="ProfileCard-details">
      <div class="ProfileCard-realName">typeahead.js</div>
      <div class="ProfileCard-screenName">@typeahead</div>
      <div class="ProfileCard-description">A flexible JavaScript library that provides a strong foundation for building robust typeaheads. Brought to you by @TwitterOSS.</div>
    </div>

    <div class="ProfileCard-stats">
      <div class="ProfileCard-stat"><span class="ProfileCard-stat-label">Tweets:</span> 48</div>
      <div class="ProfileCard-stat"><span class="ProfileCard-stat-label">Following:</span> 11</div>
      <div class="ProfileCard-stat"><span class="ProfileCard-stat-label">Followers:</span> 1068</div>
    </div>
  </div>

不确定你到底想达到什么目的，但是如果你想在搜索结果中显示图片和页脚，那么typehead.js网站本身就是一个很好的例子。

此外，结果显示在div中，所以在div内部，您可以任意设计它。