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.
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
<%- for contact in @contacts do -%>
<%=h contact.name %>
|
<%=h contact.email %>
|
<%=h contact.company.name %>
<%- end -%>
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.
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!
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.
You need to leave the UL and LIs, only start with a bare
<%=h this %> and <%= that %>
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.
Thanks loads Xavier!! 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! 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?
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.
Thanks loads Xavier!! 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! 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?
For those interested, include an “informal” class for the element you
don’t want to get in your text field. 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.
@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!
For those interested, include an “informal” class for the element you
don’t want to get in your text field. 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.
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/).
i just removed the div tags and kept the ul
i just removed the div tags and kept the ul