Rails隐藏在表单中的字段

Question

我的Rails应用程序中有一个has_many, through:关系。

群组模型

class Group < ApplicationRecord
  has_many :usergroups
  has_many :users, through: :usergroups
end

用户模型

class User < ApplicationRecord
  has_many :groups, through: :usergroups
end

用户组模型

class Usergroup < ApplicationRecord
  belongs_to :user
  belongs_to :group
end

在我的路线http://localhost:3000/usergroups/new中，我有这种形式。

<%= form_with(model: usergroup, local: true) do |form| %>

  <div class="field">
    <%= form.label :user_id %>
    <%= form.text_field :user_id, id: 'user', data: { autocomplete_source: User.order(:email).map(&:email) } %>
  </div>

  <div class="field">
    <%= form.label :group_id %>
    <%= form.text_field :group_id, id: 'group', data: { autocomplete_source: Group.order(:group_name).map(&:group_name) } %>
  </div>

  <%= form.submit %>
<% end %>

我正在使用jQuery自动填充来搜索这些字段，其中data属性是用户输入User和Group字段的任何内容。

由于我需要user_id和group_id能够添加这些用户，因此我遇到问题，因为它填充了user_email和group_name而不是user_id和group_id。如何使用电子邮件和群组名称添加这些用户，或者根据他们添加的group_name和user_email添加ID为隐藏字段？

Answer 1

您可以为每个组合框使用select事件侦听器设置所选选项的值，但在此之前，您需要获取组ID和电子邮件的ID：

表格：

// Update the 'data' attribute for both text fields, so you will get the id and value:
<%= form_with(model: usergroup, local: true) do |form| %>

  <div class="field">
    <%= form.label :user_id %>
    <%= f.hidden_field :user_id %>
    <%= form.text_field :user_id, id: 'user', data: { autocomplete_source: User.order(:email).map{ |item| {id: item.id , value: item.email} } } %>

  </div>

  <div class="field">
    <%= form.label :group_id %>
    <%= f.hidden_field :group_id %>
    <%= form.text_field :group_id, id: 'group', data: { autocomplete_source: Group.order(:group_name).map{ |item| {id: item.id , value: item.group_name } } } %>

  </div>

  <%= form.submit %>
<% end %>

Javascript：

//below events can be combined into one
$("#user").autocomplete({
      // suppose ui represents the returned value 
      select: function( event, ui ) {        
        $("#user").attr('data-selected-id', ui.item.id);
        // to set a hidden field
        $('[name="usergroup[user_id]"]').val(ui.item.id);
        console.log(ui.item);
        return false;
      }
    });

$("#group").autocomplete({
      // ui.item represents the returned object { id: # , value: ''} 
      select: function( event, ui ) {
        this.value = ui.item.value;        
        $("#group").attr('data-selected-id', ui.item.id);
        // to set a hidden field
        $('[name="usergroup[group_id]"]').val(ui.item.id);
        console.log(ui.item);
        return false;
      }
    });