Как добавить algolia изображение, чтобы в нижней части автозаполнения результатов

Question

Я использую algolia автозаполнения услуги и хотели бы, чтобы добавить изображение в нижней части результатов автозаполнения, как показано на их примерах здесь:

Это как мой 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); 
}); 

Где я должен добавить изображение, так что она находится в нижней части результата, как это на изображении, которое я отправил?

Answer 1

Вы можете использовать опцию 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 
    ] 
);