Autocomplete (plugin&Scriptaculous) not working in Safari.

rubyonrails-talk
1

Hi all, Been trying to fix this for a while now. Been searching but have not found anything related documented. Surprised that noone else seems to have encountered this problem. I am trying to implement Autocomplete in one of my forms and although its working in FF, not in Safari. This is the work-flow I am talking about.

1.User starts typing 2.Autocomplete kicks off and returns matching strings in relevant attributes and Model. 3.User scrolls down options and selects the one he/she wants. 4.Selected option appears on the text box    4a.Text appearing in text box may be different from that shown to user in options list. Like in the Scriptaculous customised_autocomplete demo. 5.When the form is submitted -> The autocomplete field may be either a virtual attribute or otherwise. The field is for a belongs_to associated model so ultimately, the foreign key must be set (in my case, its contact_id for a Create/Edit Reminder form).

Safari breaks in Step 4 ie. the selected option does not appear in the text box, and does not get submitted with the rest of the form. I have tried using the auto_complete plugin for this as well as the Scriptaculous methods. Both break at the same step in Safari. An observation here if its any help - the blue focus outline for the field is slightly eaten up on the bottom side of the field as though there is something on top of it. This is after I select an option from the list. I am also not able to figure out how to achieve steps 4a and 5. Here is the code I have so far.

_reminder.html.erb <%= text_field_with_auto_complete :reminder, :contact_id, {}, :skip_style => false %><br/> ...

reminders_controller.rb Code : - fold - unfold

protect_from_forgery :except => [:auto_complete_for_reminder_contact_id]   def auto_complete_for_reminder_contact_id     auto_complete_responder_for_contacts params[:reminder] [:contact_id]   end ... private     def auto_complete_responder_for_contacts(value)       @contacts = current_user.contacts.find(:all,         :conditions => [ 'LOWER(name) LIKE ? OR LOWER(email) LIKE ?',         '%' + value.downcase + '%','%' + value.downcase + '%' ],         :order => 'name ASC',         :limit => 8)       render :partial => 'list'     end ...

_list.html.erb <ul> <%- for contact in @contacts do -%>   <li>     <div><%=h contact.name %></div>|<div><%=h contact.email %></div>| <div><%=h contact.company.name %></div>   </li> <%- end -%> </ul>

Hope someone's got pointers. Thanks!

2

1.User starts typing 2.Autocomplete kicks off and returns matching strings in relevant attributes and Model. 3.User scrolls down options and selects the one he/she wants. 4.Selected option appears on the text box   4a.Text appearing in text box may be different from that shown to user in options list. Like in the Scriptaculous customised_autocomplete demo. 5.When the form is submitted -> The autocomplete field may be either a virtual attribute or otherwise. The field is for a belongs_to associated model so ultimately, the foreign key must be set (in my case, its contact_id for a Create/Edit Reminder form).

Just in case, model_auto_completer addresses this use case. You autocomplete a belongs_to association and get an ID or else (if :allow_free_text), get a new value.

_list.html.erb <ul> <%- for contact in @contacts do -%> <li>    <div><%=h contact.name %></div>|<div><%=h contact.email %></div>| <div><%=h contact.company.name %></div> </li> <%- end -%> </ul>

Try removing the DIVs somehow, sometimes even spaces around a LI content may result in weird behaviour in some browsers. Once you get it working, add stuff incrementally.

3

Xavier, Thanks for your reply. And i DID come across your plugin today :). So will try to implement it soon. However, I also want to understand why it is not working in Safari. If i remove the li and ul tags, the autocomplete results dont show up. The partial is rendered if i look into the dvlpmnt log but the results dont show up (in any browser). Ive tried removing the div tags, and showing just contact_name in the results without any html tags around it. Nothing works. I am running a protect_from_forgery filter for the auto_complete method alone in the controller if you notice. Will that affect this in any way? I put this filter in because the authenticity token was not being passed with the call. Would really appreciate assistance in this! Thanks!

4

Also, how can i match more than one field in the Contact model? In the sense, the User can type either the contact name or the contact email and get relevant results. Like in Gmail.

5

You need to leave the UL and LIs, only start with a bare

<li><%=h this %> and <%= that %></li>

without additional markup and no newline between the LI tags and the content.

You can write your custom action in the controller to implement any search criteria, both in bare auto_complete and model_auto_completer, there's a documented convention for the action name, as well as options to point to a different action.

6

Thanks loads Xavier!! :slight_smile: i just removed the div tags and kept the ul and li tags like you said and it worked.. i cant believe it was so simple!! been having this problem for quite a while! Also, I have implemented your plugin and its working well.. thanks! :slight_smile: Just one more thing i could never figure out. If you take a look at the scriptaculous demo, the select options have an avatar, the name, and the email id, but when the user selects an option, only the name shows up in the text box. How can we achieve that?

7

I am not 100% sure, but I believe it is a side-effect of the CSS + what the browser takes from the LI to display something in the text field. The CSS goes in the HEAD of the page if you'd like to play around.

8

For those interested, include an "informal" class for the element you don't want to get in your text field. :slight_smile: works well. @Xavier, Thanks for pointing me in the right direction with that! How can i customize model_auto_completer_result to show more than one attribute in the results? like contact name, contact email? Hoping you can hep me with that.

9

If you founded a solution for auto_complete that one should work, because model_auto_completer is really a wrapper around auto_complete, and that showing results is completely delegated to the original plugin.

If you'd like to update the view elsewhere with that additional data from the selected item there's a hook :after_update_element that receives among other arguments the very selected LI element. (Details in http://model-ac.rubyforge.org/).

10

@Xavier I used a solution i had for auto_complete for the results. But there are a few issues like the options list does not go away when the user selects an option. I either need to press "esc" or click on some other part of the page for that to go away. And i cant use the mouse to select an option from the options list. it shows up on the text field and then automatically deletes itself if i use the mouse. Also, for this, <%= belongs_to_auto_completer :reminder, :contact, :name%> can you show me an example of how to use :after_update_element. The functionality i need is this. Once an option is chosen, using the chosen contact, i want to query the contact's employer's details and display them on an adjacent div. Something like @company = current_user.companies(params[:contact.company_id]) where im expecting contact to be passed in by after_update_element. I understand its a JS function. I dont know anything about JS. Least of all, writing functions in JS. I realise im slowly getting confused with my requirements and which methods to use here. Pl excuse me if i am not making myself clear. Thanks for all the help!

11

Anyone? This is the very last step in this implementation and im not able to find a solution by myself.