.

September 13, 2006

Cascading selects vs. auto_complete

I have lately come to dislike cascading selects (where the value from one select populates a second select with some values). These beasties have their purpose in life, but for the most part they are unnecessary evils.

If you have a ‘Really Long List’ to select from, then using a cascading select makes a lot of sense (unless you want your users to hate you). The problem is that they are a pain to code (well, not so bad if you use the KRJS plugin ), and they are still a pain to use if you actually know what you are looking for (then you have to remember what ‘category’ if falls in).

Lately I have been getting around this little problem using auto-complete boxes.
In Rails you can have an auto_complete box act like a select like this…

  1. # model
  2.  
  3. # id              :integer
  4. # name         :string
  5. # category_id :integer
  6. # full_name   :string
  7.  
  8. class Model < ActiveRecord::Base
  9.   belongs_to :category
  10.   validates_uniqueness_of :full_name
  11.  
  12.   def before_save
  13.     self.full_name = "#{self.category.name} – #{self.name}"
  14.   end
  15. end
  1. # Controller
  2. class ModelController < ActionController::Base
  3.  
  4.   auto_complete_for :model, :full_name
  5.  
  6.   def action
  7.     if request.post?
  8.        @model = Model.find_by_full_name(params[:model][:full_name])
  9.        # do some error handling here if item does not exist… or you could create a new one
  10.     else
  11.       @model = Model.new
  12.    end
  13.  
  14. end
  1. # view for ‘action’
  2. <%= start_form_tag :action=>’action’ %>
  3. <%= text_field_with_auto_complete ‘model’, ‘full_name’ %>
  4. <%= submit_tag ‘Submit’ %>
  5. <%= end_form_tag %>

Now when the user starts typing in the auto_complete field, they will get records that match against both the name and the category of the record. The enterprising reader could also replace certain characters (like space) with the SQL wildcard ‘%’ to get more flexible search results.

A user might be able to just type: ‘f mus’ to find ‘Ford – Mustang’.
(It’s not well known, but ‘f%mus’ will match ‘Ford – Mustang’ using the standard auto_complete box that ships with rails).

This type of entry is really fast and quite intuitive once users get the hang of it.

I find that this system works best when
1. There are a ton of choices
2. The user already has a pretty good idea which choice they want to select, but don’t really want to spend 15 minutes scrolling to find it.

It’s not particularly good if the user has no idea what to enter. In those cases, the standard cascading select may help walk them through the selection process.

Notes: You can avoid using the ‘full_name’ column if you properly design your own custom auto_complete_for function

* Filed by Kevin Olbrich at 3:41 pm under Ruby on Rails, User Interface, auto_complete, select controls
No Comments

July 7, 2006

Updating ’select’ controls with AJAX

In web design there are frequently times when a form needs to be able to have the contents of ’select control B’ depend on the contents of ’select control A’ (or some other control type for that matter). Using conventional web design methods, one would have to define a ‘onChange’ javascript event for ’select control A’, which fires off a callback that updates the second select control.

This is cumbersome to code, and it leads to upleasant page refreshes every time the user changes the value of ’select control A’.

Another way to handle this is by using AJAX methods to update the second control as needed. This is fairly easy in Rails, and is even easier if you make use of the KRJS plugin (http://www.agilewebdevelopment.com/plugins/krjs).

  1. # View
  2. <%= select ‘model’,'id’, Model.find(:all).map {|x| [x.name, x.id]} %>
  3. <div id=’select-b’>
  4.   <%= select ‘model’,'category_id’, Model.find(@model.id).categories.map {|x| [x.name, x.id]} %>
  5. </div>

In this example, the second select (’select-b’) is normally populated with ‘categories’ associated with the initially selected model. Changing the model would not normally update the second select, so things would be all wrong.

  1. # Controller
  2. def on_model_id_change
  3.   render :update do |page|
  4.     @categories = Model.find(params[:dom_value]).categories
  5.     page.replace_html ’select-b’, :inline=>"<%= select ‘model’,'category_id’, @categories.map {|o| [o.name, o.id]} %>"
  6.   end
  7. end

This is probably the easiest way to update a select box using AJAX. Remember, this only works with the KRJS plugin.

UPDATE: Of course all of this only works if you have AJAX enabled by adding <%= javascript_include_tag :defaults %> in the of your layout file.

* Filed by Kevin Olbrich at 12:27 pm under Ruby on Rails, User Interface, select controls
* 38 Comments