2017-02-12 27 views
1

我使用algolia自動完成的服務,並希望將圖像 添加到自動完成結果的底部,就像是在他們的例子如下所示:如何algolia圖像添加到自動填充結果的底部,

enter image description here

這是我autocomplete.js看起來像:

autocomplete('#search-input', {}, [ 
    { 
     source: autocomplete.sources.hits(players, { hitsPerPage: 5 }), 
     displayKey: 'first_name', 
     templates: { 
     header: '<div class="aa-suggestions-category">Players</div>', 
     suggestion: function(suggestion) { 
      return '<span>' 
       + '<a href="/player/' + suggestion.id + '">' 
       + '<div class="media">' 
       +  '<div class="media-left">' 
       +  '<img class="media-object" src="/imagecache/small/' + suggestion.image_filename + '">' 
       +  '</div>' 
       +  '<div class="media-body">' 
       +  '<p>' + suggestion._highlightResult.first_name.value + " " + suggestion._highlightResult.last_name.value + '<small> ' + old + ' years</small>' + '</p>' 
       +  '<small> ' + suggestion.nationality + ' '+ suggestion.position + '</small>' 
       +  '</div>' 
       + '</div>' 
       + '</a>' 
       +'</span>'; 
     } 
     } 
    }, 
    { 
     source: autocomplete.sources.hits(videos, { hitsPerPage: 5 }), 
     displayKey: 'title', 
     templates: { 
     header: '<div class="aa-suggestions-category">Videos</div>', 
     suggestion: function(suggestion) { 
      timeAgo(); 
      return '<span>' 
       + '<a href="/player/video/' + suggestion.uid + '">' 
       + '<div class="media">' 
       +  '<div class="media-left">' 
       +  '<img class="media-object" src="https://s3.eu-central-1.amazonaws.com/videos.football-talents.com/' + suggestion.video_id + '_1.jpg">' 
       +  '</div>' 
       +  '<div class="media-body">' 
       +  '<p>' + suggestion._highlightResult.title.value + ' <small class="timeago" title="' + suggestion.created_at + '">' + suggestion.created_at + '</small>' + '</p>' 
       +  '<small> ' + suggestion._highlightResult.player_name.value + " " + suggestion._highlightResult.player_surname.value + '</small>' 
       +  '</div>' 
       + '</div>' 
       + '</a>' 
       +'</span>'; 
     } 
     } 
    } 
]).on('autocomplete:updated', function(event, suggestion, dataset) { 
    var timeagoTimeout; 
    clearTimeout(timeagoTimeout); 
    timeAgo(); 
    timeagoTimeout = setTimeout(timeAgo, 60000); 
}); 

我應該在哪裏添加圖像,以便它在結果的底部,就像是在圖像上我已經發布?

回答

3

您可以使用footer模板選項,如描述的here

$('#search-input').autocomplete({ 
    templates: { 
     footer: '<div class="branding">Powered by <img src="https://www.algolia.com/assets/algolia128x40.png" /></div>' 
    } 
    }, [ 
    /// here your sources 
    ] 
);