Algolia将页脚添加到javascript自动填充搜索结果下拉列表中

时间:2016-12-07 16:36:46

标签: javascript ruby-on-rails algolia

我正在使用Rails创建我的应用程序,但javascript来实现搜索。这就是我的Algolia自动完成功能。我和Algolia在免费('黑客')计划,我想添加一个页脚。是否有捷径可寻?我在下面(我在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)});

1 个答案:

答案 0 :(得分:0)

您需要将footer放在templates对象中。像那样:

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模板。