Autocomplete with acts_as_taggable_on

Basic tagging sorted, I went looking for a way to add auto-complete - cos it's a nice UI improvement that's pretty common on teh intarwebs these days. I did a lot of searching, as most of the solutions seem to require switching to jquery, and for reasons of laziness (and legacy code), I don't wanna do that right now.

Luckily my searching dug up a tutorial by Michael Schuerig called: auto-completion for tag lists that works with acts_as_taggable_on and the auto_complete plugin.

It pretty much covers all the bases for tagging, so I won't repeat it all here. But I think it's awesome, because it will auto-complete on just that part of the field after the last comma - just what you need for a keyword-list.

Do read all the way to the bottom of the page, as his later updates can change the way it functions a bit.

I did make one addition myself. We have one form that lets you upload multiple items at once, with a "add a new form" link. It just repeatedly inserts a partial-template onto the end of the existing list, each time it's clicked... but because it's called *after* the "onLoad" event, the auto-complete wasn't getting added to it.

To work with that, we needed to add the installAutocompletion(); call to our addNewForm function, and also make sure that each "tags_list" field had a unique id.

I also needed to slightly update the controller code so that it could *either* take params[:my_widget][:tag_list] *or* take params[:my_widgets].first[:tag_list], because the multiple-forms-on-the-page form always sends through an array of widgets instead of just the one.

Then I realised that installAutocompletion would just keep adding autocompleters every time it was called... even to fields that already had one. So I updated the code by adding the following around everything after:

/* only add it if it doesn't already exist */
   if ($(completions.id) == null) {
       element.parentNode.insertBefore(completions, element.nextSibling);
       ... everything else after the above line too
   }

After that it was all gravy.

Acts-as-taggable-on

Tagging is pretty popular these days, and it was time to add it to our site. Unfortunately, lots of the gems are old, and it's had to know if that means "good and has stuck around" or "buggy, obsolete and no longer supported".

The rubytoolbox page on rails tagging has several gems - most of which are marked as inactive now. The only one that looked like it had any recent activity is: acts-as-taggable-on. It's also the top-most-downloaded, so that looked good.

Best news: it is rails-3 compatible AND supports a recent build-version that is still Rails-2 compatible. As I've mentioned before, my current client is still on Rails-2 - because the upgrade pain is not currently outweighed by the new features.

The only annoyance is that the rdoc only has rails-3 post-install instructions rails generate acts_as_taggable_on:migration. These don't work for rails-2, and if you try just substituting "script/" for "rails ", it'll give you an error saying: Couldn't find 'acts_as_taggable_on:migration' generator

I had to hack about a bit to find the new migration name, but what you need is: script/generate acts_as_taggable_on_migration

After that I used this extremely good tutorial on tagging with acts-as-taggable-on.

I don't like the tag-cloud style of tag-selection, and instead prefer something much more like Stack Overflow. So I created my own tag-list as per the code below.

It lists all current tags for the class (assuming similar code setup to the tutorial above), and filter based on that keyword - incorporating any existing search or pagination conditions you already have. It will highlight the current keyword, and change that link to a "deselect if you click" link.

    # code in index page
    <% @tags.sort_by(&:count).reverse.each do |k| %>
      <% url_opts = {:action => "index", :controller => "posts"}
         link_name = "#{k.name} (#{k.count})"
      %>
      <% if @keyword == k.name %>
        <%= link_to link_name, url_opts.merge(:keyword => nil), :class => "tag current_tag", :title => "Click again to see all" %>
      <% else %>
        <%= link_to link_name,  url_opts.merge(:keyword => k.name), :class => "tag", :title => "Click to filter by #{k.name}" %>
      <% end %>
    <% end %>


   # code in controller
   options = {} # any search/pagination conditions go here
   @tags = Post.tag_counts_on(:keywords)
   klass = Post
   klass = klass.tagged_with(@keyword) if (@keyword = params[:keyword]).present?
   @posts = klass.paginate( options )




  /**** and associated tag-cloud styles ****/
  /* basic tag-box */
  .tag {
    background-color: #eee;
    border: 2px solid #ccc;
    color: orange;
    border-radius: 7px;
    -moz-border-radius: 7px;
    padding: 2px 15px;
    text-decoration: none;
  }
  .current_tag {
    background-color: #ddd;
    color: orange;
    border: 2px solid orange;
    border-radius: 7px;
    -moz-border-radius: 7px;
    font-weight: bold;
  }
  .tag:hover, .current_tag:hover {
    background-color: #bbb;
    color: red;
    border: 2px solid red;
    border-radius: 7px;
    -moz-border-radius: 7px;
  }

Next up is to figure out ye olde ajax auto-suggest when I add them.