Rails auto complete Custom Object

Question

In my application, users belong to a group, and this is done in my user group model.

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 

When I want to add user to group , although I need to know the group identifier and the user identifier, which is less than ideal. I created an autocomplete field using jQuery to take care of this for me.

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

When I try to create a new usergroup with the email address that I selected from this drop-down menu, it is sent because it requires the user to be a user. How do I pass the complete user object to this field, and not just the email address of the user I want to create? Am I right about this?

This is the route that is used to get users.

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

Answer 1

When I need to find a value from a large list, I like to use the "select2-rails" gem gem

you can do ajax code to get your values ​​like this

 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 

everything you need in your HTML

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

and in your 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 } } ) } } } }); }); 

I hope this works for you or points you in the right direction

Answer 2

Usually, when you have autocomplete, you want to use a selection box for this. One of the advantages of the select box is that you can display one value, and the choice actually represents another. This is ideal for your situation when you want the user to select an email, but you really want to get the server side user_id.

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

You can wrap a selection like this with libraries such as Selectize or Select2 to display an autocomplete drop-down list.

I believe the jQuery Autocomplete library will work for this too, but I am not very familiar with this. This is similar to what you want each element to be an object with a value and label. https://jqueryui.com/autocomplete/#custom-data

It might look like your existing JS, which loads the autocomplete_source attribute, but does not guarantee that it will work.

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