The World of Mayukh Bose

Coding the View

Creating the Select box

As I mentioned in the previous page, we'll assume that there's a parent table called manufacturers and we want our select box to pull results from this table. We'll assume that manufacturers has a parent-child relationship with categories and each manufacturer has many categories. First we need to modify our search form in our view to add the select box. All changed lines are marked in bold font <form method="POST" action="/controller_name/search" name="search_form" > Search <% man_list = ['-- all manufacturers --', 0] manufacturers = Manufacturer.find(:all, :conditions => ['deleted_flag = 0'], :order => 'name') manufacturers.each do |man| { man_list << [man.name, man.id] } %> <%= select_tag :man_names, options_for_select(man_names, params[:id].to_i) %> <%= text_field_with_auto_complete :category, :short_desc, {:min_chars => 3}, {:with => "value + '&man_id=' + document.search_form.man_names.value" %> <input type="submit" value="search" /> </form> The first change you'll notice is that we're no longer using the rails form_tag() function to generate our form. Instead, we've changed it to use HTML code for a form tag instead. The reason for this is that there was no way that I found to set the name of the form using the form_tag() function and I need to do that for some javascript code below in the text_field_with_auto_complete_function. Since we no longer use the form_tag() function, we explicitly need to fill in the actual controller_name in the action= attribute. The next thing you'll notice is that I build an array called man_list which is populated with two fields from the manufacturers table (we'll assume you've created the model Manufacturer already). Note that this should really have been done in the controller, but I am demonstrating it in the view instead, so that I have less code to edit for this example. While creating man_list, note that I have a default option for all manufacturers. The next thing we need to do is create the select box that contains the list of manufacturers, that we accomplish with the select_tag() function. Note that I set the default for the select to params[:id].to_i, the reason being that in my actual code, I used this whole form as a partial template in a number of forms some of which were individual manufacturer pages. The next REALLY REALLY BIG thing to note is how text_field_with_auto_complete is now being called with more arguments. The key is the fourth argument (the :with specification). What I'm doing here is telling it that when the text field makes its XMLHttpRequest to populate the drop-down, it should pass extra parameters in the query string. The first param to the :with option is value, which contains the argument for the text that is populated in the text-box already. I found this out by examining the javascript code that is generated by the text_field_with_auto_complete function. The man_id parameter is built using more javascript and contains the value of what is selected in the SELECT box (it does this by evaluating document.search_form.man_names.value). This is why I needed the form to have its name= attribute set. Now when the user types something in the text box, the actual XMLHttpRequest that goes back to the server contains what is in the select field as well as what was typed in the text box. The final change is to merely close the form tag. Next we'll explore how to change the controller to handle selecting with these two parameters