具有多个属性的 Searchkick 自动完成功能答案

【问题标题】：Searchkick autocomplete with multiple attributes具有多个属性的 Searchkick 自动完成功能
【发布时间】：2019-06-26 21:24:32
【问题描述】：

这里是新手，使用 Searchkick 和 Typeahead/bloodhound 实现自动完成有些困难。

首先，我有一个索引/欢迎主页，其中有我的搜索框输入字段。然后在多个模型中搜索不同细胞的名称和不同的细胞标记（对此并不重要）。

首先在我的路由文件中，我不确定是否将我的自动完成“附加”到我的“欢迎”路由或“单元格”路由，我都尝试过，但目前似乎没有什么不同它是这样设置的：

 resources :cells do
    collection do
      match 'autocomplete' => 'welcome#autocomplete', via: [:get], as: :autocomplete
    end
  end

 resources :welcome   #index / home page

我的表单输入是：

<%= form_tag(@Search, :action => 'index', :method => "get", id: "search-form") do %>
<%= text_field_tag(:q, nil, placeholder: "Search...", class: "form-control rounded-left typeahead", autocomplete: "off") %>
<% end %>

我的模型如下：

searchkick text_start: [:name], callbacks: :async, suggest: [:name], word_start: [:name]

和我的控制器操作：

  def autocomplete
        render json: Cell.search(params[:q], {
            fields: ["name^5"],
            autocomplete: true,
            limit: 5,
            load: false,
            misspellings: false
        }).map(&:name)
  end

终于有了javascript：

<script src="typeahead.bundle.js"></script>
<script>
  var Cells = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
      url: '/welcome/autocomplete?query=%QUERY',
      wildcard: '%QUERY'
    }
  });
  $('#typeahead').typeahead(null, {
    source: Cells
  });
</script>

我想我对如何正确设置它感到非常困惑，我发现 Searchkick 文档很难推断出我的目的，因为我对这一切都很陌生 :) 如果有人能够提供帮助或者指点我一个很好的指南（那不是岁），这将是惊人的，因为我很确定我只是在兜圈子。这是实现自动完成的最佳方法还是有更好的方法来做到这一点？

感谢阅读，感谢您的帮助:)

【问题讨论】：

标签： ruby-on-rails ruby autocomplete typeahead searchkick

【解决方案1】：

给未来读者的快速更新：

我确定在路由中，您的自动完成代码必须指向具有您的自动完成方法的控制器，对我来说这是我的欢迎控制器。

  resources :welcome do
    collection do
      match 'autocomplete' => 'welcome#autocomplete', via: [:get], as: :autocomplete
    end
  end

我对控制器中的自动完成方法很满意，并且很满意我需要当前的 javascript（目前在我的 html 中的标签中

<script>
  var autocomplete = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
      url: '/welcome/autocomplete?q=%QUERY',
      wildcard: '%QUERY'
    }
  });
  $('#typeahead').typeahead(null, {
    source: autocomplete
  });
</script>

var autocomplete 变量需要在下面用于source:（我之前没有意识到这一点）

仍然遇到困难，因为自动完成功能仍然无法正常工作，但我认为我正在取得进展

【讨论】：