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中，您可以按照您喜歡的任何方式進行設計。