Cascading selects vs. auto_complete

Kevin Olbrich — Wed, 13 Sep 2006 19:41:03 +0000

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…

# model
 
# id              :integer
# name         :string
# category_id :integer
# full_name   :string
 
class Model < ActiveRecord::Base
  belongs_to :category
  validates_uniqueness_of :full_name
 
  def before_save
    self.full_name = "#{self.category.name} – #{self.name}"
  end
end 

# Controller
class ModelController < ActionController::Base
 
  auto_complete_for :model, :full_name
 
  def action
    if request.post?
       @model = Model.find_by_full_name(params[:model][:full_name])
       # do some error handling here if item does not exist… or you could create a new one 
    else
      @model = Model.new
   end
 
end 

# view for ‘action’
<%= start_form_tag :action=>’action’ %>
<%= text_field_with_auto_complete ‘model’, ‘full_name’ %>
<%= submit_tag ‘Submit’ %>
<%= 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

Updating ’select’ controls with AJAX

Kevin Olbrich — Fri, 07 Jul 2006 16:27:27 +0000

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).

# View
<%= select ‘model’,'id’, Model.find(:all).map {|x| [x.name, x.id]} %>
  <%= select ‘model’,'category_id’, Model.find(@model.id).categories.map {|x| [x.name, x.id]} %>

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.

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

SciWerks.com » select controls

Cascading selects vs. auto_complete

Updating ’select’ controls with AJAX