.

multiple_auto_complete plugin

Rails’ auto_complete control can be a really handy way to allow users to select an object or string from a list of pre-existing values, however, one big limitation to its use is the fact that you can’t have more than one of them on a single page.

UPDATE: just to clarify this a bit. If you have more than one auto_complete that tries to access the same model/field combo, you get into trouble. You can have multiple auto_completes so long as they access different model/field combinations.

I tried a couple of hacks around this problem (some involving method_missing), and finally found a method that works pretty well and doesn’t mess up your controllers.

The approach I ended up using was to rewrite the ‘auto_complete_for’ and ‘text_field_with_auto_complete’ functions so that they ignore trailing numbers on a dom_id. Once you install the plugin (see below), you simply use it like this…

  1. # View file
  2. <%= text_field_with_auto_complete ‘object_1′, ‘name’ %>
  3. <%= text_field_with_auto_complete ‘object_2′, ‘name’ %>

  1. # controller file
  2. auto_complete_for :object, :name

All the auto_complete fields named /object[-_]d+/ will call the ‘auto_complete_for_object_name’ function in the controller now. The default response function will pull out the correct information and respond as usual.

When you submit the form, the values will be passed in the params hash as

  1. params = { ‘object_1′ => {‘name’=>’name1′}, ‘object_2′=>{‘name’=>’name2′ }}

Installation

script/plugin install svn://sciwerks.com/home/sciwerks/public_svn/multiple_auto_complete/

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

« Previous Page