Implementing auto complete for more than one field in Rails

Question

I have an app, which implements a group feature. Each group has n members. Also, each group has a group specific profile pic to it.

I have been able to implement auto complete for the group feature keeping in mind the group name alone. I have referred to the following tutorial for the same:- http://railsforum.com/viewtopic.php?id=23188

I am using ruby 1.8.7 and rails 2.0.2 for project specific purpose. I have installed the auto_complete plugin in the appropriate directory. I am on Ubuntu 10.04 OS

I would like to integrate two more things as part of the current auto complete feature for groups

1> When I type in a group name in the auto complete text field I should be able to also see an appropriate group specific profile picture which show up based on the entered text.

2> I should also be able to see the number of members that would show up corresponding to each group, based on the entered text in the auto complete text field.

I am facing the following hurdles going about the same:

Currently the code that I have implemented to get basic auto complete works based on group name looks like this:-

in groups_controller.rb

auto_complete_for :investor_group, :title

in index.html.erb of groups

<%=stylesheet_link_tag "groups"%>
<%= javascript_include_tag :defaults %>

Search for a investor group: <%= text_field_with_auto_complete :investor_group, :title,  {}, {:method => :get} %><%=submit_tag "Search"%>

in config/routes.rb

map.resources :investor_group, :collection => {:auto_complete_for_investor_groups_title => :get }

I am able to currently display an image for a particular group and retrieve the total number of members belonging to a group by making use of the following code in index.html.erb of groups:-

<%for inv_group in @investor_groups%>
<div class="inv_group_img" align="center"><%=image_tag "investor_groups/#{inv_group.title}.jpg"%></div>
  <div class="inv_group_details">
<%=inv_group.activated_members.size%><br>
<%end%>

The alignment of the view might be hay wire currently, but thats not my immediate focus. Thus kindly, ignore the same.

I have an idea of what I need to do and I have been able to write some code for the same in my groups_controller.rb

To get what I require, I tried the following:-

def calculate_members_count
    @investor_group = InvestorGroup.find(params[:id])
    @members_count = @investor_group.activated_members.size
    return "@members_count", :title
  end

Now this should give me the group title/name and the members_count. I am not sure how could I fetch the image also within the same method.

Also, from this If it could work correctly, I kinda have done some guess work for the changes to be reflected in the already written autocomplete functionality. I am not too sure if they would be correct... but here it goes..

I changed the following in my index.html.erb

Search for a investor group: <%= text_field_with_auto_complete :investor_group, :calculate_members_count,  {}, {:method => :get} %><%=submit_tag "Search"%>

I changed the following in my groups_controller.rb auto_complete_for :investor_group,:calculate_members_count

I am really not sure if I am correct till here, if so I really can't figure out what change I would now need to reflect in routes.rb

I wanted to also ask, do I need make some changes to my model by any chance. I don't think so, but just asked in case.

Also I guess if the auto complete text field supports query search for only one attribute, in this case would I have to define a customized auto complete search to suit my requirement? If yes I really have no idea on how to get a head start, and how to go about it. I may be just now that there would be also a need of a custom javascript also for this.

Kindly help me on this. Any inputs on this would be really handy..

Thanks for your patient reading and time..

---

Question Edited

---

I just wanted to mention, I am a newbie to Rails and have hardly 2.5 months of experience.

After much search, I realized in order to implement the auto complete feature for more than one field, I would have to use a customized auto complete method.

I have referred to the following tutorial to get the customized auto complete working for me:- http://cobaltedge.com/auto-complete-text-fields-in-rails-2

My customized auto complete method looks like this:-

 def auto_complete_for_investor_group_title
    re = Regexp.new("^#{params[:investor_group][:title]}", "i")

    #re1 = Regexp.new("^#{params[:investor_group][:title].jpg}", "i")

    find_options = { :order => "title ASC", :conditions => ['title LIKE ?', "%#{params[:title]}%"] }

   @investor_group = InvestorGroup.find(:all, find_options).collect(&:title).select { |title| title.match re }

render :inline => "<%= content_tag(:ul, @investor_group.map { |title| content_tag(:li, h(title)) }) %>"
  end

My index.html.erb for the auto complete customized method to work looks like this:-

<% form_tag({:action => :search}) do %> Search for a investor group: <%= text_field_with_auto_complete :investor_group, :title, :autocomplete => "off"%><%=submit_tag "Search"%> <%end%>

The appropriate changes made in routes.rb look like this:-

  map.auto_complete ':controller/:action', :requirements => { :action => /auto_complete_for_\S+/ }, :conditions => { :method => :get }

This code works well for fetching the group title when it is searched for. I want to modify this code to also fetch a group profile specific image and the total number of members belonging to a group.

The image that is uploaded is of type file_field and has the attribute named :uploaded_data .

I also need to fetch the total number of members belonging to a group. Currently the image and the total number of members belonging to a group is displayed via index.html.erb separately using the following code:-

 <%for inv_group in @investor_groups%>
        <div class="inv_group contentTableGray">
          <div class="inv_group_img" align="center"><%=image_tag "investor_groups/#{inv_group.title}.jpg"%></div>
          <div class="inv_group_details">
            <span style="float:right;padding-right: 10px;"><%=show_edit_link_for_group(inv_group)%></span>
            <%=link_to inv_group.title, :action => :show, :id => inv_group%>        
            <div style="clear:both;"></div>
            <%=truncate(inv_group.description,100)%>        
          </div>
          <div class="inv_group_details" style="width:14%;text-align: center;">
            <%=inv_group.activated_members.size%><br>

          ....( code continues further.. )

I also have figured out that the size of a group can be some how fetched in the groups_controller using some code like this:-

 @investor_group = InvestorGroup.find(params[:id])
    @members = @investor_group.activated_members.size

I am really not sure on how to modify this code to for the method auto_complete_for_investor_group_title .

activated members is taken as an association from the following investor_group.rb model

has_many :activated_members, :through => :investor_group_members, :source => :investor, :conditions => "activated is true"

Using the above information, I am unable to figure out how could I add total members belonging to a group and group specific profile pic to the already existing auto complete feature which works for title.

Can you please help me with the same.

Thanks a lot.

Answer 1

So, in parts:

1. When you get the investor groups, you're getting only the titles with the call "collect(&:title)". Remove it to get the whole object;
2. You don't need use the regex, you already get the titles that match with the LIKE in conditions;
3. Instead of render inline, try to make a partial that render all that you need inside the LI tag. Render inline and content_tag are good when all that you need is a small text, but with "bigger things", prefer partials.

Sorry any engrish.

Update:

The collect(&:title) says "from all investor_groups that you find, give me only their titles". So, remove it completely, using only:

InvestorGroup.find(:all, find_options)

It says "give me the investor_groups that you find", so you will have an array of investor_groups to use in the partial. With this, you can show the data that you want in the autocomplete list, like you did in the index.html, with a "for" statement, putting inside the "li" elements the images, the title and the activated members size.

Sorry any engrish.

Re-Update

Almost there. To the autocomplete works, the response from the autocomplete method must be a list. So, the partial would be like:

<ul>
  <% for inv_group in @investor_group2 %>
    <li><%=h inv_group.title %>, <%=h inv_group.activated_members.size %></li>
  <%end%>
</ul>

Each item wrapped by a li tag, and all wrapped by an ul tag. If you look the previous code, this is exactly how it works:

content_tag(:ul, @investor_group2.map { |title| content_tag(:li, h(title)) })

An ul content tag, wrapping li content tags that wrap the titles.

And I did separate the title and the size in two erb, because I never tried put two information in the same, and don't now if it works.

Sorry any engrish.