Topic: The mother of all autocompletes

So with a restful design it's often hard to find a place for autocompletion. If you pass it to the current controller, it tries to find a model. If you create a custom action, it ugs up your controller. So what to do? Simple. Create an autocompletion controller and let it do all the work. Check it.

class AutocompleteController < ApplicationController

  def index
      params[:id] =~ /(\w+)_(\w+)/
      render :json => $1.to_s.camelize.constantize.find(:all).map{|x| x[$2]}.to_json
  end
end


It's pretty slick. Basically what it does is you pass it a name say "sport_name" and then it maps it to the Sport model retrieves all the names and then renders it to json. Now the fun part. The javascript. This is all done in jquery so you'll need that if you want this awesomeness on your site. Also you'll need the jquery auto complete plugin, I user this version(http://www.pengoworks.com/workshop/jquery/autocomplete.htm). Then just use this javascript:

        $("input.autocomplete").each(function(){
        var name = this.name.match(/\[(\w+)\]$/)[1];
        var id = this.id;
        $.ajax({
            type: "GET",
            url: "/autocomplete/"+name,
            dataType: "json",
            success: function(msg) {
                $("input[@id=\""+id+"\"]").autocompleteArray(msg, { delay:10, minChars:1, matchSubset:1,    autoFill:true, maxItemsToShow:10});
            }           
        })
    });

Note: you have to access the fields with [@id =] because of all the brackets if you have any nested elements.
Then all you have to do is give your fields the class of autocomplete and make sure they are name "object_method" where object is the model and method is the property. To give you a brief overview of what the code actually does. It finds any input field with the class of auto complete and splits the name to get path for autocomplete. Then it makes an ajax call to get the data for the autocomplete search. Finally once the data is retrieved it attaches the autocomplete behavior to the field. Sure you could use the rails helpers, but this is lightning fast and is completely unobtrusive.

Last edited by smizzle (2007-07-31 11:30:51)

http://www.brianthecoder.com

Rails, Javascript, Actionscript and More.

Re: The mother of all autocompletes

I can't get this to work. I did what you said, and I don't get any fields coming up. sad


Do you know how to get this to work with an edit in place type of feature? (using jquery as well)

Last edited by DFischer (2007-08-03 14:20:37)

http://danielfischer.com - Personal Web-Technology-Blog, Los Angeles.

Re: The mother of all autocompletes

With an edit in place feature you'll have to take the part from the each in the autocomplete and put that into a separate function and then bind it to a click event and have it called at the same time when you replace the text with an input field. It all really depends on how you set it up. I'd make sure you have firebug installed on firefox. It makes debug js really nice. Especially since you can watch the ajax calls in really time. Try using firebug and see if there are any errors there. If not post your code and I'll take a look.

http://www.brianthecoder.com

Rails, Javascript, Actionscript and More.