Algolia javascriptの自動補完検索結果のドロップダウンにフッターを追加

Question

私は私のアプリを作成するのにRailsを使用していますが、検索を実装するにはjavascriptを使用しています。これが私のAlgoliaオートコンプリートのためのものです。私はAlgoliaとの自由な（Hacker）計画にいるので、フッターを追加したい。これを行う簡単な方法はありますか？私が下にあるもの（https://github.com/algolia/autocomplete.js/blob/master/README.mdで見つけたもの）は働いていません。

var client = algoliasearch("<%= ENV['ALGOLIA_API'] %>", "<%= ENV['ALGOLIA_SECRET'] %>"); 
var index = client.initIndex('User'); 

//initialize autocomplete on search input (ID selector must match) 
autocomplete('#aa-search-input', 
{ hint: false }, [{ 
    source: autocomplete.sources.hits(index, {hitsPerPage: 5}), 
    //value to be displayed in input control after user's suggestion selection 
    displayKey: function(suggestion) { return suggestion.first_name + " " + suggestion.last_name}, 
    //hash of templates used when rendering dataset 
templates: { 
     //'suggestion' templating function used to render a single suggestion 
     suggestion: function(suggestion) { 
      var link = "<form action='<%= ENV['HOST'] %>users/" + suggestion.id + "/friend_requests' method='post' id='addfriend' style='color: lightgreen'> <input name='authenticity_token' value='<%= form_authenticity_token %>' type='hidden'> <button type='submit' name='user_id' value='" + suggestion.id + "' class='btn-link'>Add</button></form>"; 
      var card = "<span>" + "<img src=<%= ENV['CLOUDINARY_SECOND_URL'] %>" + suggestion.photo.path + " alt='' class='avatar'> " + 
      suggestion._highlightResult.first_name.value + " " + suggestion._highlightResult.last_name.value + "</span><span>" + link +"</span>"; 

      return card 

     } 
    } 
    footer: '<span class="branding">Powered by <img src="https://www.algolia.com/assets/algolia128x40.png" /></span>' 
}]).on('autocomplete:selected', function(event, suggestion, dataset) { 
    var url = "<%= ENV['HOST'] %>users/"; 
    window.location.assign(url + suggestion.id)}); 

Answer 1

あなたはtemplatesオブジェクトの内部でfooterを配置する必要があります。そのような：

templates: { 
    //'suggestion' templating function used to render a single suggestion 
    suggestion: function(suggestion) { 
     var link = "<form action='<%= ENV['HOST'] %>users/" + suggestion.id + "/friend_requests' method='post' id='addfriend' style='color: lightgreen'> <input name='authenticity_token' value='<%= form_authenticity_token %>' type='hidden'> <button type='submit' name='user_id' value='" + suggestion.id + "' class='btn-link'>Add</button></form>"; 
     var card = "<span>" + "<img src=<%= ENV['CLOUDINARY_SECOND_URL'] %>" + suggestion.photo.path + " alt='' class='avatar'> " + 
     suggestion._highlightResult.first_name.value + " " + suggestion._highlightResult.last_name.value + "</span><span>" + link +"</span>"; 

     return card 

    }, 
    footer: '<span class="branding">Powered by <img src="https://www.algolia.com/assets/algolia128x40.png" /></span>' 
} 

今、あなたは外にそれを持っているので、それを考慮にfooterテンプレートを負いません。