Question

我对此不知所措。我正在尝试为全局自动完成搜索栏实现this tutorial，该栏在数据库中搜索键入的关键字并列出它们。我见过this question，this，this，this和其他几个。没有人能解决我的问题。

搜索查询仅不返回任何结果，并且不触发自动完成。但是，我仍然可以如official guide所示调用函数easyAutocomplete。而且我没有任何错误（至少在表面上）。

这是我的代码示例：

routes.rb：

Rails.application.routes.draw do

  resources :photo_uploads

  #......................

  resources :posts do
    put 'publish' => 'posts#publish', on: :member
    put 'unpublish' => 'posts#unpublish', on: :member
  end
  get :search, controller: :posts
  root to: 'static_pages#home'

  get 'static_pages/about'

  get 'static_pages/contact'

end

application_controller.rb：

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  before_action :search


#.....................
  def search
    @q = Post.ransack(title_cont: params[:q])
    @searchpost= @q.result(distinct: true) 
    # @bodysearch = Post.ransack(body_cont: params[:q]).result(distinct: true) 

    respond_to do |format|
      format.html {}
      format.json {
        @searchpost = @searchpost.limit(6) 
        # @bodysearch = @bodysearch.limit(6)
      }
    end 
  end
end

erb文件：

<%= search_form_for @q do |f| %>
    <%= f.search_field :title_cont, class: " search-bar ml-3", data: { behavior: "autocomplete" } %>
     <%= f.submit %>
<% end %>

search.json.jbuilder：

json.posts do
  json.array!(@posts) do |post|
    json.title post.title
    json.url post_path(post)
    json.published post.published_at
  end
end

search.js：

document.addEventListener("turbolinks:load", function () {
  $input = $("[data-behaviour='autocomplete']")

  var options = {
    getValue: "title",
    url: function (phrase) {
      return "/search.json?q=" + phrase;

    },
    categories: [
      {
        listlocation: "posts",
        header: "<strong>Posts</strong>",
      }
    ],
    list: {
      onChooseEvent: function () {
        var url = $input.getSelectedItemData().url
        $input.val("")
        Turbolinks.visit(url)
      }
    }
  }
  $input.easyAutocomplete(options)
});

posts_controller.rb：

before_action :force_json, only: :search

# .............

private

    def force_json
      request.format = :json
    end

我将devise gem用于身份验证，并将cancancan用于用户角色/访问。他们工作得很好。 rails版本是5.1.6

我在做什么错了？

Answer 1

这可能有点晚了，但是我也在尝试遵循本教程，并且遇到了类似的问题。对我来说，我使用的是Rails 6和webpacker，必须确保用于easyautocomplete的js和css文件位于资产管道中，并且已正确链接。然后，一旦我使webpacker能够正确编译，搜索栏就会起作用。

Answer 2

我找到了解决方案。

原因是 Rails 6 显着改变了 Asset Pipeline，用 WebPacker + Yarn 取代了旧的方式（链轮）。所以本教程中的 JS 部分不再有效。

解决办法：将该教程与本教程结合起来： https://joelc.io/dynamic-autocomplete-rails-6

更详细地，以下是实现此功能的确切步骤：

按照 GoRails 教程进行操作直到最后，看到它仅部分起作用（未触发 JS，但独立的 json 页面显示正常）
保留代码，并按照上面链接的教程进行操作，直到第 27 步。您可以忽略除此之外的步骤，因为 GoRails 教程在该部分更好

使用Ransack gem和EasyAutoComplete进行全局自动完成搜索（搜索查询不起作用）

2 个答案: