Implementing a OnClick kind of functionality and f

Question

I am trying to implement a functionality similar to the onclick method of Javascript, using Rails Helpers.

I have implemented a auto complete feature for more than one field in Rails 2.0.2 and Ruby 1.8.7. This configuration is run on Ubuntu 10.04 and yes , I know.. you might feel why Rails 2.x when we have Rails 3.x , it is so because of project specific purposes. I don't have much of a choice on that ..:) .

I am able to successfully retrieve a group specific profile pic, a group title and a the total number of members belonging to a group based on the given "title" as the basic search query that a user inputs in the text field where auto complete functionality is being performed. Getting the auto complete functionality to work for the scenario above was a challenge in itself.

In case you aren't able to get a better understanding of what I have implemented wrt autocomplete, kindly refer to Implementing auto complete for more than one field in Rails .

You can also get a better understanding of what I have implemented by referring to http://imagepaste.nullnetwork.net/viewimage.php?id=2048 , http://imagepaste.nullnetwork.net/viewimage.php?id=2050 and http://imagepaste.nullnetwork.net/viewimage.php?id=2049 .

Please note the name of group specific profile pic is same as that of the group title with the exception that the pic would also have .jpg appended to it.

I am making use of a customized auto complete method, an auto complete plugin and also making use of Rails partials. The cusotmized auto complete method is allowing me to modify the basic functionality to suit my requirement.

Coming to my question, Now say if a user enters "I" in the text field as per the auto complete feature that I have implemented, the results(for more than one matches found(i.e. if more than one group exists which start with an "I") on a specific search query) populated on the User Interface would have all the following :-

• Group Specific Profile Pic(s) starting with name same as title, in this case "I%".jpg
• Group title name.
• Total number of members belonging to a group

Say I have India and Independence as my group names I would obtain the following results displayed in my auto complete text field.

India.jpg(image will be displayed)     India(Group title name displayed)               3(dummy value here)

and similarly

Independence.jpg                     Independence
4

All this would come in one text field. Please note the comments in parentheses are not part of the results returned via auto complete.

In case you are not able to get the picture in your mind of how the UI would look, Kindly register in www.diasp.org and search for any random user using its search feature , once your account is created.

Please observe that the spacing between image, title name and total number of group members is too much. I will be referring back to this in the comments that follow.

The code for the partial that renders all this is:-

<ul>
  <% for inv_group in @investor_group2 %>
  <%=image_tag "investor_groups/#{inv_group.title}.jpg" , :width =>

'40', :height => '22', :align => 'left' %>

<%=h inv_group.title %>(<%=h inv_group.activated_members.size %>)

<%end%>

Now if a user hovers his/her mouse over say India and then clicks on it, the text field is populated with **India(3)** .

What I need is to implement is a on click in Rails which will select only Group title. I tried to implement the group title and group size with separate <li> tags , I was then able to mouseover and select only the title and get it populated for the text field.

The problem with this approach is it completely spoils the formatting and the spacings/gaps between the image, the title and the group size. This requires formatting in order to obtain a better look and feel of the UI.

If I can figure out how to reduce the formatting space between each of the three title.jpg,title and group size. This option could be considered to be an alternative fix but might not be the best fix.

I am not too sure how can I go about the same(the suggested fix) as I am a newbie wrt many things in RoR. I am not too sure on what commands of RoR I can make use of which would help me simplify/solve my task. Can you please help me on this.

I would be also grateful for any suggestions on a more efficient fix to this scenario.

I later on, in a way was able to figure out that by using javascript's onclick event, I could solve my problem. I am not too sure about the equivalent syntax for the same using Rails Helpers.I referred to http://api.rubyonrails.org/classes/ActionView/Helpers/JavaScriptHelper.html#method-i-javascript_tag , to get a hang of how the javascript_tag can be used for my purpose, but if this is the way out, I am really clueless on how to modify the basic syntax to suit my requirements. Kindly help me with the same if feasible.

Thank you..

Answer 1

To add to Walter's suggestion from http://www.ruby-forum.com/topic/1475454?reply_to=992312 .

This code below did the magic for me...

<ul>
  <%= javascript_include_tag :defaults, :cache => true %>
  <%=stylesheet_link_tag "groups"%>
  <% for inv_group in @investor_group2 %>

   <li><div class="autocomp_field_width_modify" ><%=image_tag "investor_groups/#{inv_group.title}.jpg" , :width => '40', :height => '22', :align => 'left' %><%=h inv_group.title%><span class="informal">(<%=h inv_group.activated_members.size %>)</span></div></li>

  <%end%>
</ul>

and in my groups.css I added the following:-

.autocomp_field_width_modify
{
      text-align: justify;
      text-indent: 3%;
}

Thanks for your suggestion Walter, I know I might not be exactly following HTML Markup standards( I have still a lot ground to cover to strengthen my concepts in HTML.. ). But I am just happy that finally this works based on the requirement.

Thanks again.. Walter..

Answer 2

The Script.aculo.us Ajax.Autocompleter has a simple feature for just this sort of thing. Any element that you want to exclude from the auto-populated results just needs to be wrapped in a span.informal tag. So your results would look like this:

<li>
    <span class="informal">[img tag]</span>
    India
    <span class="informal">whatever else</span>
</li>

When this result is clicked in the autocompleter's hint list, only the word India will be entered in the text field.