Algolia footer zu javascript hinzufügen autocomplete search results dropdown

Question

Ich benutze Rails, um meine App zu erstellen, aber Javascript, um die Suche zu implementieren. Dies ist, was ich für meine Autovervollständigung Algolia habe. Ich bin mit Algolia auf dem freien ("Hacker") Plan, und ich möchte eine Fußzeile hinzufügen. Gibt es einen einfachen Weg, dies zu tun? Was ich unten habe (was ich gefunden habe: https://github.com/algolia/autocomplete.js/blob/master/README.md) funktioniert nicht.

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

Sie müssen footer innerhalb des templates Objekt setzen. Wie folgt aus:

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>' 
} 

Gerade jetzt haben Sie es draußen, so dauert es nicht footer Vorlage berücksichtigt.