Typo Administration: article tagging III...

Steve Longdo — Wed, 15 Mar 2006 03:47:00 +0000

Last time I alluded to using an AJAX-less solution for the tagging auto completion feature. In fact in the controls.js JavaScript file distributed with Typo there is a "class", Autocompleter.Local, that does what we are after. As the name implies it does completion from a local JavaScript array.

We need to coerce the @tags attribute we set up in the content_controller last time, into a JavaScript array. Then hook up the Autocompleter.Local to the Keywords field on the Article form and pass it the JavaScript array of tags. The Autocompleter.Local needs a <DIV> element to update with matches for what we type into the Keywords field. Also for everything to work properly, turn off the browser's native "autocomplete" feature by setting it to "off" in the text_field method's options hash for the Keywords field. Now that we know what the next steps are lets code:

app/views/admin/content/_form.rhtml

...
<p>
  <label for="article_keywords">Keywords:</label><br />
  <%= text_field 'article', 'keywords', :autocomplete => 'off'  %><br />
  <div id="completer" style="max-width: 75px; display: none; overflow: auto; border: 1px solid black; background-color: white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
  opts = new Array(<%= @tags.sort_by{|t| t.display_name}.collect!{|t1| '"' + t1.display_name + '",'} -%>'');
// <![CDATA[  
  new Autocompleter.Local('article_keywords','completer', opts
  , { tokens: new Array(' ',',','\n'), partialChars: 1, choices: 20, partialSearch: false});
// ]]>
</script>
</p>
...

This code reads well, it is Ruby after all, but the line right after the <script> element may deserve some special explanation. That dense little line of Ruby code sorts our @tags by their display_name and then collects them together into a String that will look like this: ("tag1","tag2",...,''). This String will in turn be evaluated into a JavaScript Array. The options being passed to the Autocompleter {tokens,choices,etc.} are documented in the controls.js JavaScript file distributed with Typo.
Let's create a new article and check out the fruits of our labor thus far by seeing what happens when we enter the letter 'a':

The CSS styling provided is pulled from the admin panel's CSS stylesheet, hence the redness. Also you can see that my guess at making the completer <DIV> element's max-width: 75px, didn't work out too well. Using Chris Pedrick's WebDeveloper Extension to view the generated source of our completer <DIV> element, the HTML markup provided by the Autocompleter is pretty basic. We'll work on augmenting it and making the CSS styling better looking next time.

Musings of a Trained Monkey: Typo Administration: article tagging III...

Typo Administration: article tagging III...