Question

尝试在我的rails 4应用中使用this gem自动完成功能。我试图让我的评论表单在用户输入时自动填充艺术家名称（如果它已经存在于数据库中）。

按照示例，在我的评论控制器中，我把

class ReviewsController < ApplicationController
  autocomplete :review, :artist

在application.js中：

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require autocomplete-rails
//= require turbolinks
//= require bootstrap
//= require bootstrap-scrollspy
//= require bootstrap-modal
//= require bootstrap-dropdown
//= require_tree .

在路线中：

resources :reviews do
    get :autocomplete_review_artist, :on => :collection
end

并在我的评论表单的顶部：

<%= form_for(@review) do |f| %>
<% f.autocomplete_field :artist, autocomplete_review_artist_reviews_path %>

评论模型：

class Review < ActiveRecord::Base

    validates_presence_of :artist
    validates_presence_of :venue
    validates_presence_of :date

    belongs_to :user
    belongs_to :concert

end

虽然它不起作用，当我尝试在已经创建的表单中输入艺术家名称时，没有任何内容可以自动完成它。任何帮助表示赞赏。

我还尝试在两个独立的控制器中完成示例的完成。仍然没有工作。

在我的艺术家控制器中

class ArtistsController < ApplicationController
  before_action :set_artist, only: [:show, :edit, :update, :destroy]

  autocomplete :artist, :name

然后在路线

resources :reviews do
    get :autocomplete_artist_name, :on => :collection
  end

并审核表格

<%= form_for(@review) do |f| %>
  <% f.autocomplete_field :artist, autocomplete_artist_name_reviews_path %>

Answer 1

我认为通过在JS数组中进行改进响应来获得更好的结果。为此，您需要使用.as_json方法在控制器上呈现变量。

所以，在控制器中（参数是说明性的）：

@autocompleteArr = Object.pluck(:property).as_json

在视图中：

<%= f.text_field :somefield %>

JS中的

（你不能把它放在你的应用程序文件甚至你的html中）：

$('#somefield').autocomplete({source: '<%=raw  @autocompleteArr %>'});

你会看到，甚至更容易，但在这种情况下阻止ajax加载时间会使你的使用体验变得更糟。

希望它有所帮助。

Answer 2

在artist.js.erb中创建了assets/javascripts。内容为：
$(function() { var artists = <%Artist.All.collect{|artist| artist.name}%> $( "#artistReview" ).autocomplete({ source: artists }); });
包括在视图中。使用include_javascript_tag
给出了需要自动填充的字段id: 'artistReview'

分别在application.js中需要jquery-ui，//code.jquery.com/jquery-1.10.2.js和//code.jquery.com/ui/1.10.4/jquery-ui.js。这解决了这个问题，但必须通过

完成广泛的样式

rails4-autocomplete无法正常工作

2 个答案: