Ogawa::Memoranda

Ogawa::Memoranda: キーワードを元にエントリのbasenameを設定するの前半、準備段階までの作業が完了しているものとします。

まずはじめに、全タグを格納した配列を生成するJavaScriptファイルを作るためのインデックステンプレートを追加します。「出力ファイル名」は仮にtags.js、「テンプレートの内容」は以下の通り入力して、保存(と再構築)しておきます。

var customarray = [ <MTTags glue=",">'<$MTTag$>'</MTTags> ];

次にexttmpl/cms/keywords_ac.tmplというファイルを作り、内容を以下のようにします。赤字で示されているのは、keywords_noac.tmplから追加された部分です。

<script type="text/javascript" src="<TMPL_VAR NAME=STATIC_URI>js/tc/autocomplete.js"></script>
<script type="text/javascript" src="<TMPL_VAR NAME=BLOG_URL ESCAPE=HTML>tags.js"></script>
<script type="text/javascript">
var keywordsAutoComplete;
function keywordsInitHandler() {
    getByID('keywords').parentNode.innerHTML += '<div id="keywords_completion"></div>';
    keywordsAutoComplete = new TC.AutoComplete('keywords', customarray);
}
TC.attachLoadEvent(keywordsInitHandler);
</script>
<style type="text/css">
#keywords_completion { position: absolute; z-index: 1; background: #FFF; border: 1px solid; padding: 2px; }
.complete-none { }
.complete-highlight { font-weight: bold; }
</style>
<div class="field">
<label for="keywords"><MT_TRANS phrase="Keywords"></label> <a href="#" onclick="return openManual('entries', 'keywords')" class="help">?</a><br />
<input class="full-width" name="keywords" id="keywords" tabindex="6" value="<TMPL_VAR NAME=KEYWORDS ESCAPE=HTML>" maxlength="255" autocomplete="off" />
</div>

うまくいけば(?)、冒頭の画面のように「キーワード」入力欄で登録済みのタグによるオートコンプリート機能が使えるようになります。

このHackで重要なポイントは、Ogawa::Memoranda: キーワードを元にエントリのbasenameを設定すると同様、Javascriptによるわずかなコード(とスタイルシート)追加だけでオートコンプリートが実現できる、という点です。したがって、例えば両方の拡張を合成するのも容易に実現できます。

このあたりのテンプレートをまとめて固めたものを置いておきますので、興味のあるかたはさらに道を究めてみてはいかがでしょう。

keywords_tmpl.zip