Rails: How to pass value from textfield to a partial - ruby-on-rails

Question

How can I easily pass the value I get from the auto_complete textfield to a partial.
<%= text_field_with_auto_complete :participant, :name, {}, {:url => {:controller => "contentcom/discussions", :action => :get_users_for_auto_complete}, :method => :get, :param_name => 'search'} %>
<%= button_to_function(:OK) do |page|
page.insert_html :top, :participants, :partial => 'participant', :locals => end %>
Bye,
Nico

Answer 1

First of all you need to know that the helpers text_field_with_auto_complete and button_to_function not really handle user actions, but only generate HTML and javascript code. Only generated javascript code can interact with the user. In this case text_field_with_auto_complete generates the following (approximately):
<input type="text" id="participant_name" name="participant[name]" size="15" />
<div id="participant_name_auto_complete" class="auto_complete"> </div>
<script type="text/javascript">
var participant_auto_completer = new Ajax.Autocompleter (
'Participant',
'Name',
'/contentcom/discussions/get_users_for_auto_complete',
{method: 'GET', param_name: 'search'}
);
</script>
The above code is that the user gets in his browser.
If you read the documentation for text_field_with_auto_complete, then you will see that we can use the option :after_update_element. This option allows us to specify the name of the JavaScript function that will be called when the user selects one of the proposed values.
What we need to do:
write a JavaScript function that
will display anywhere user-selected
value from autocomplete field.
call text_field_with_auto_complete
with :after_update_element
That's how the template will look like:
<ul id="selected_participant_container"></ul>
<%= text_field_with_auto_complete :participant, :name, {}, {
:url => {:controller => "contentcom/discussions", :action => :get_users_for_auto_complete},
:method => :get,
:param_name => 'search',
:after_update_element => 'afterParticipantSelected'
}%>
<script type="text/javascript">
function afterParticipantSelected (el, value) {
var container = document.getElementById ('selected_participant_container');
container.innerHTML = value;
}
</ Script>
Now, when a user selects a value in the autocomplete field, it will be displayed in the element with id = selected_participant_container
Of course, you can use methods that are proposed by tokland.
But I would Recommend you first learn the basics of HTML and Javascript.

Answer 2

Note first that the block of button_to_function (and its partial, of course) is generated server-side, so it has no way to know the value of the autocomplete in the client. You have 2 ways to accomplish what you want: create a RJS action for the auto_complete (if that's possible) or 2) use Javascript/AJAX and connect to the auto_complete URL, get the value and modify the DOM accordingly (also in JS).