Typeahead.js - 使用一个远程源的多个数据集

Question

我目前正在使用 typeahead.js 和 searchkick rails gem 来搜索和自动完成查询。通过对我的控制器进行必要的调整，我现在正在搜索两个模型（艺术家和专辑）的记录：

class SearchController < ApplicationController
  ...
  def autocomplete
    @results = Artist.search(params[:query], index_name: [Artist.searchkick_index.name, Album.searchkick_index.name], fields: [{ name: :word_start }], limit: 10)

    render json: @results
  end
end

---

resources :search, only: :index do
  collection do
    get :autocomplete
  end
end

按预期检索这两者的搜索建议，但我现在需要将这两者分组到各自的模板中。这促使我考虑使用 Multiple Datasets。

在我的 js 文件中，我正在使用 remote 检索结果，正如 post 中所建议的那样：

remote: { 
  url: "/search/autocomplete?query=%QUERY",
  wildcard: "%QUERY" 
}

与我所拥有的不同，文档建议使用 prefetch 选项从模型的索引操作中提取：

prefetch: '../data/nhl.json'

不幸的是，以这种方式配置我的 js 并没有给我任何东西。大概我需要一个albums 变量，但它不仅与我的artists 变量设置相同吗？我将如何根据我现在拥有的 JS 进行配置？

$(function() {
  var artists = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("artist"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: { 
      url: "/search/autocomplete?query=%QUERY",
      wildcard: "%QUERY" 
    }
  });

  artists.initialize();

  $(".search").typeahead(null, {
    displayKey: "name",
    source: artists.ttAdapter(),
    templates: { 
      header: "<h3>Artists</h3>",
      suggestion: function(data) {
        return "<a href=" + data.url + ">"+ data.name +"</a>";
      }
    },
    {
     // Albums would go here
    }
  });
});

返回的 JSON

/* artists.json */

{
id: 1,
name: "50 Cent",
avatar: ...,
url: "/artists/1"
}

/* albums.json */

{
id: 1,
name: "Get Rich or Die Tryin'",
artwork: ...,
genre: "Hip-Hop/Rap",
release_date: ...,
url: "/albums/1"
}

Answer 1

尝试使用templates 的suggestion 属性来过滤使用返回的url 的显示结果data，RegExp.prototype.test()

$(".search").typeahead(null, {
    displayKey: "name",
    source: artists.ttAdapter(),
    templates: { 
      // header: "<h3>Artists</h3>",
      suggestion: function(data) {
        var temp;
        if (/^\/albums/.test(data.url)) {
           // albums template
           // temp = "albums template"
        } else {
           // temp = "artists template"
        }
        return temp;
      }
    }
  });
});