text_field_with_auto_complete inside form_for

Question

Simple question really - how do I use text_field_with_auto_complete inside a form_for block?

I\'ve tried doing f.text_field_with_auto_com

Answer 1

A couple of months back I wrote a plugin that allows you to call the "text_field_with_auto_complete" method directly on fields_for or form_for. The idea was to support text fields that appear more than once in a form by generating unique ids to allow the javascript to work, but it might help solve your problem also, or at least give you some new ideas.

See: http://github.com/pat11639/repeated_auto_complete

...and this article for details for how it works: http://patshaughnessy.net/2008/10/31/modifying-the-autocomplete-plugin-to-allow-repeated-fields

Answer 2

If your intent is to set a id field, you must:

1. render the results in LI items, each li having it DOM id set up to the id of the returned record, like this:

   <UL>
          <LI ID="1">Item 1</LI>
          < LI ID="2">Item 2< /LI>
   </UL>
   

2. Your text field would be something like:

   <%= text_field_with_auto_complete :model, :method, {}, :after_update_element => ‘getSelectionId’ % >
   

3. and a javascript method called getSelectionId like this

   function getSelectionId(text, li) {
   
   alert (li.id);
   
   }
   

note that you can do anything via javascript since you have the text and the li element available.

Another option is this plugin

Answer 3

I personally use this:

<%= f.text_field :name, :autocomplete => "off" %><div class="auto_complete" id="customer_name_auto_complete"></div>

And add the auto-generated Javascript and CSS manually. Here's the Javascript:

new Ajax.Autocompleter('customer_name', 'customer_name_auto_complete', '/customers/auto_complete_for_customer_name', {
    method:'get',
    paramName:'customer[name]',
    minChars: 3
});

and here's the CSS:

div.auto_complete {
  width: 350px;
  background: #fff;
}

div.auto_complete ul {
  border:1px solid #888;
  margin:0;
  padding:0;
  width:100%;
  list-style-type:none;
}

div.auto_complete ul li {
  margin:0;
  padding:3px;
}

div.auto_complete ul li.selected {
  background-color: #ffb;
}

div.auto_complete ul strong.highlight {
  color: #800;
  margin:0;
  padding:0;
}

Answer 4

I had this problem too, but the solution I used might not apply to you.

Since the object I was querying in the autocomplete belonged to a different model, I used a fields_for like this, which solved the autocomplete problem.

<% fields_for :model, @formobject.model do %>
<p>
<%= text_field_with_auto_complete :object, :field, :skip_style => true %>
</p>
<% end %>

Good luck!

Answer 5

Even within the form_for block you ned to specify the full model because it is used to construct the Ajax callback. Also in the empty hash Ricardo listed you could pass additional options to the autocomplete field including ":token" etc.