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 文件中，我按照 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 属性 of templates 来过滤显示的结果，使用 url of returned 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;
      }
    }
  });
});

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

Typeahead.js - Multiple Datasets using one Remote Source

javascript

ruby-on-rails

json

searchkick