具有多个属性的Searchkick自动完成

时间:2019-02-02 14:42:28

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

这里的新手,在使用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文档很难推断出我的目的,因为我对这一切都是新手:)如果有人可以提供帮助或向我指出一个很好的指南(还没有几岁),那将是惊人的,因为我敢肯定我只是在圈子里转转。这是实现自动完成的最佳方法,还是有更好的方法呢?

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

1 个答案:

答案 0 :(得分:0)

任何未来读者的快速更新:

在路线中可以肯定的是,自动完成代码必须指向具有自动完成方法的控制器,对我来说,这是我的欢迎控制器。

  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:(我之前没有意识到)

由于自动完成功能仍无法正常工作,我仍然遇到困难,但我认为我正在取得进步