Question

我在基本任务管理应用程序中有一个表单，允许将任务分配给用户（任务belongs_to用户）。我正在使用Simple Form。

目前，该关联以典型方式填充，其中包含用户下拉列表：<%= f.association :user, label_method: :name, value_method: :id, include_blank: false %>。

但是，随着用户数量的增长，我希望将其更改为自动填充表单字段以查找用户。我已经尝试过关注Railscast on the subject，虽然它不使用简单表单而且不支持我的实现。

这是我的表单，模型和.coffee代码：

表格

<%= simple_form_for @task do |f| %>
  ...
  <%= f.input :user_name, as: :search, data: 
      {autocomplete_source: User.pluck(:name)} %>
  ...
  <%= f.button :submit %>
<% end %>

模型

# Virtual attribute for autocomplete form field
  def user_name
    user.try(:name)
  end

  def user_name=(name)
    self.user = User.find_by_name(name) if name.present?
  end

tasks.coffee

jQuery ->
  $('#task_user_name').autocomplete
    source: $('#task_user_name').data('autocomplete-source')

这将生成以下HTML：

<input class="string search optional form-control 
ui-autocomplete-input ui-autocomplete-loading" type="search" 
value="Robert Strong" name="task[user_name]" id="task_user_name" 
autocomplete="off">

虽然dev工具控制台中出现以下错误：

Uncaught TypeError: this.source is not a function

关注HTML中的autocomplete="off"并且无法想象TypeError有多大帮助！

我很难过，所以非常感谢任何关于让这个工作的建议！提前谢谢，让我知道你的想法，史蒂夫。

Answer 1

autocomplete_source期望一个数组或URL在被调用时返回JSON，其结果与查询匹配。 http://api.jqueryui.com/autocomplete/#option-source

现在你有

  <%= f.input :user_name, as: :search, data: 
  {autocomplete_source: User.pluck(:name)} %>

这可能会为javascript返回一个字符串。所以你可以改成它：

  <%= f.input :user_name, as: :search, data: 
  {autocomplete_source: User.pluck(:name).to_json} %>

然后在设置自动完成时解析JSON：

jQuery ->
  $('#task_user_name').autocomplete
    source: JSON.parse($('#task_user_name').data('autocomplete-source'))

从长远来看（当你拥有大量用户时），这将显着影响页面的加载时间。您应该真正关注该railscast并将URL作为自动完成源：

  <%= f.input :user_name, as: :search, data: 
  {autocomplete_source: users_path} %>

确保将json渲染路径添加到用户控制器上的索引操作。

如果你的索引动作也用于其他事情，你可以使用respond_to：

# users_controller
def index
  @users = User.order(:name)
  @users = @users.where("name like ?", "%#{params[:term]}%") if params[:term]

  respond_to do |format|
    format.html  # index.html.erb
    format.json  { render :json => @users.map(&:name) }
  end
end

Answer 2

除了奥利弗的答案，我还必须：

<%= f.input :user_name, as: :search, input_html: {class: 'ui-autocomplete-input', data: {autocomplete_source: users_path} }%>

使其与Simple_Form一起使用。

Ruby on Rails - 简单表单自动完成关联搜索

2 个答案: