A Tag-Suggest Feature (for use with Technorati, a subject index, or anything else)


Published on February 23, 2005 at 1:19 PM EST
In the Tutorials category.

The idea of “tags” and “tagging” has become very popular in the recent past. The idea behind tags is really that of organization and cross-referencing, though specific implementation and implementation with Movable Type varies. TechnoratiTags and ishbadiddle’s subject index are examples of two different tag uses. This article is not about implementations; to find this useful you’ll want to be using tags already.

tagsuggest.gif

I think tagging is great way of thinking. The problem, however, is that it’s easy to create near-duplicate tags: “photo” or “photos,” “MovableType” or “Movable Type,” for example. This hack attempts to solve that problem by offering suggestions, based on keywords/tags you’ve already used. As it doesn’t rely on a specific purpose—TechnoratiTags, for example—it’s suggestions can be used for any purpose.

First, you’ll need to create a new Index Template where the suggestions list will live. The output filename should be keywords_list.php (yes, you’ll need to be able to use PHP on your site for this to work). Paste the following code into the template, save, and rebuild it. Be sure “rebuild automatically…” is checked.

<?php

// Put together a list of all keywords or tags.
$string = '<MTEntries lastn="10000"><MTEntryKeywords encode_php="q"> </MTEntries>';

// Remove duplicates and line endings, etc.
$rawkeywords = preg_split( '/\s*[,| |\n]\s*/m', $string );
$keywords = array_unique ( $rawkeywords );
natcasesort( $keywords );

// Build an array for the JavaScript function to use.
echo 'var customarray = new Array( ';

foreach ($keywords as $value) {
  echo "'$value', "; }

echo "'' );";

?>

I used some JavaScript I found at The Code Project to make this work. Download actb.js then upload to your site.

2005/05/30 Update: The hack below is superceded by the edit_entry.tmpl alternate template. Visit the Alternate Template Collection to download it and for more information.

Here’s the real “hack” part: you need to edit edit_entry.tmpl, found in tmpl/cms/ in your Movable Type installation. Scroll down to line 244 where you’ll find this code:

<TMPL_IF NAME=DISP_PREFS_SHOW_KEYWORDS>
<div class="field">
<label for="keywords"><MT_TRANS phrase="Keywords"></label> <a href="#" onclick="return openManual('entries', 'item_keywords')" class="help">?</a><br />
<textarea class="full-width" name="keywords" id="keywords" tabindex="6" rows="2"><TMPL_VAR NAME=KEYWORDS ESCAPE=HTML></textarea>
</div>
</TMPL_IF>

Replace that section with this, noting the path to actb.js and keywords_list.php ; change them if necessary.

<TMPL_IF NAME=DISP_PREFS_SHOW_KEYWORDS>
<div class="field">
<label for="keywords"><MT_TRANS phrase="Keywords"></label> <a href="#" onclick="return openManual('entries', 'item_keywords')" class="help">?</a><br />
<script language="javascript" type="text/javascript" src="/actb.js"></script>
<script language="javascript" type="text/javascript" src="/keywords_list.php"></script>
<input autocomplete="off" class="full-width" name="keywords" id="keywords" tabindex="6" onfocus="actb(this,event,customarray);" value="<TMPL_VAR NAME=KEYWORDS ESCAPE=HTML>" size="90" /><br />
</div>
</TMPL_IF>

Save and you’re done! When you save the entry, keywords_list.php will be rebuilt with any new keywords/tags you’ve added. Use a space to separate keywords/tags. After you’ve got a few saved in keywords_list.php, you’ll be able to see them pop-up as suggestions the next time you start typing them!