Question

在我的应用程序中，用户属于一个组，这是在我的用户组模型中完成的。

class Usergroup < ApplicationRecord
  belongs_to :user
  belongs_to :group
end

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

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

当我想向user添加group时，虽然我需要知道group的ID和user的ID，但不是理想的。我使用jQuery创建了一个自动完成字段来为我处理这个问题。

<%= 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>

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

当我尝试使用我从此下拉菜单中选择的电子邮件创建新usergroup时，它正在提交，因为它要求有用户。如何将完整的用户对象传递给此字段而不仅仅是我要创建的用户的电子邮件？我接近这个吗？

这是用于获取用户的路由。

user GET    /users/:id(.:format)      users#index

Answer 1

当我必须从大型列表中找到值时，我喜欢使用gem "select2-rails" gem

你可以制作一个Ajax代码来获得这样的值

class UserController < ApplicationController
  respond_to :html, :json

  def index
    if params[:email].present?
      @users = User.where(email: params[:email])
    else
      @users = User.all
    end
    respond_with @users
  end
end

在您的HTML中

所需的一切

<div class="field">
  <%= form.label :user_id %>
  <%= form.hidden_field :user_id, id: 'user_id', class: 'select2' %>
</div>

并在你的JS中

$(document).ready(function() {
  $('.select2').select2({
    ajax: {
      url: "<%= user_path(format: :json) %>",
      dataType: "json",
      results: function(data, page) {
        return { 
          results: $.map( data, function(user, i) { 
            return { id: user.id, text: user.email } 
          } )
        }
      }
    }
  });
});

我希望这对您有用或指向正确的方向

Answer 2

通常，当您拥有自动填充功能时，您需要使用选择框。选择框的一个优点是您可以显示一个值，而选择将实际提交另一个值。这非常适合您希望用户选择电子邮件但您确实希望接收user_id服务器端的情况。

<%= form.collection_select :user_id, User.order(:email), :id, :email %>

您可以使用Selectize或Select2等库来包装这样的选择，以提供自动完成样式下拉列表。

我相信jQuery自动完成库也适用于此，但我对它并不十分熟悉。这看起来像你想要的每个项目是具有值和标签的对象。 https://jqueryui.com/autocomplete/#custom-data

对于加载autocomplete_source属性的现有JS，它可能看起来像这样，但不保证这将起作用。

<%= form.collection_select :user_id, User.order(:email), :id, :email, data: { autocomplete_source: User.order(:email).map{ |u| { value: u.id, label: u.email } } %>

Rails自动完成用户对象

2 个答案: