Question

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

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文件中，我正在使用{strong> post 中建议的remote检索结果：

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

尝试使用suggestion的{{1}}属性，使用返回的templates url的{{1}}过滤显示的结果，data

RegExp.prototype.test()

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

1 个答案: