Programming is FUN!

The best tutorial about auto complete control by far was one from Ryan Bates. It worked like a charm, and he made it look so easy. Only problem I had with it was that I wanted another control on the form to filter the auto-complete control.
The tutorial didn’t cover that, so I got stranded in a strange place. The solution was pretty simple, but it took me a while to figure it out. If you are just beginning Rails like I am – this is rigth tutorial for you.

I have ‘City’ and ‘Street’ on my form. ‘City’ is regular drop down list since there are only few cities to select from. I wanted the ‘Street’ control to be an autocomplete text box that get’s filtered based on the city that is selected. You need to do everything that Ryan says you should – when you finish his tutorial come back for adding “filter” functionality I’ll won’t add exactly the same fields, but you’ll get the point… Oh, you are back already… ok. I am assuming that you’ll change model names based on the model that you are using. I did everything in Ryan tutorial but with my model.
You need to pass additional parameter that you want to be a filter. In my case that is currently selected city id. I’ll put it in template ‘new.html.erb’ of view that is rendering both controls

<%= f.select  :settlement_id, @settlements.map {|u| [u.name,u.id]} %>
 <%= f.text_field_with_auto_complete :event, :street_name , {
 :url => formatted_streets_path(:js), :method => :get,
 :with =>"'search=' + element.value + '&settlement_id=' + $('event_settlement_id').value"  } %>

Step 1)

Pay attention to :with

:with =>"'search=' + element.value + '&settlement_id=' + $('event_settlement_id').value":

You are basicly saying : Append to url search=#value_of_my_control&settlement_id=#value_of_control_named_event_settlement_id

Step 2)

Change the street controller to know how to accept additional parameters and filter the results

def index

    if params[:settlement_id].blank?
      @streets = Street.find(:all,
                          :conditions => ['name LIKE ?', "%#{params[:search]}%"])
    else
      @streets = Street.find(:all,
                   :conditions => ['name LIKE ? and settlement_id = ?', "%#{params[:search]}%", "#{params[:settlement_id]}" ])
    end

    respond_to do |format|
      format.html # index.html.erb
      format.xml  { render  ml => @streets }
      format.js
    end
  end
 

You can check it out just by typing

http://localhost:3000/streets.js?search=mac&settlement_id=1 

to see if data fetching is working. After that the autocomplete should “just work”

That’s all for now…