キーワード入力補完機能をつける(2)｜Materializing [マテリアライジング]

必要ファイルのDL

●suggest.js - 入力補完ライブラリ 上記より suggest.js をDLする

●Prototype JavaScript Framework: Class-style OO, Ajax, and more
上記より prototype-1.4.0.js をDLする

2つのファイルを jsディレクトリを作ってその中に入れます。
サイトルート/js/ここに入れる

テンプレート作成

• 名前・・・ tags-array
• 出力・・・js/tags-array.js
• 内容・・・下記コード

var tags = [<MTTags glue=","> '<MTTag encode_js="1">'</MTTags> ];

edit_entry.tmpl の修正

edit_entry.tmpl のキーワードに当る箇所を変更します。「DISP_PREFS_SHOW_KEYWORDS」で検索すると良いでしょう。
参考にしたサイト記事とは違い、ここでは代替テンプレートは用いません。変更の前にはリネームするなりしてバックアップを取ってから行うように。
(代替を設定してみたらBigTemplateが使えなくなったような覚えがあります)

<TMPL_IF NAME=DISP_PREFS_SHOW_KEYWORDS> <script type="text/javascript" src="<TMPL_VAR NAME=BLOG_URL ESCAPE=HTML>js/prototype.js"></script> <script type="text/javascript" src="<TMPL_VAR NAME=BLOG_URL ESCAPE=HTML>js/suggest.js"></script> <script type="text/javascript" src="<TMPL_VAR NAME=BLOG_URL ESCAPE=HTML>js/tags-array.js"></script> <script type="text/javascript"> Event.observe(window, 'load', function() { var kwd = $('keywords'); var ol = document.createElement('ol'); ol.setAttribute('id', 'tag-suggest'); kwd.parentNode.appendChild(ol, kwd.nextSibling); kwd.setAttribute('autocomplete', 'off'); new IncSearch.SuggestTag('keywords', 'tag-suggest', tags, { dispMax: 10, highlight: true, listTagName: 'li', dispAllKey: true, delim: ',' }); }); </script> <style type="text/css"> #tag-suggest { position: absolute; background-color: rgb(239, 239, 239); border: 1px solid rgb(191, 191, 223); font-size: 90%; width: 20em; z-index: 10; } #tag-suggest li { margin: 0; padding: 0 .2em; width: 19.6em; overflow: hidden; white-space: nowrap; z-index: 10; } #tag-suggest li.select { color: rgb(239, 239, 239); background-color: rgb(31, 31, 47); } #tag-suggest li.over { background-color: rgb(191, 191, 223); } </style> <div class="field"> <label for="keywords"><MT_TRANS phrase="Keywords"></label> <a href="#" onclick="return openManual('entries', 'keywords')" class="help">?</a><br /> <textarea class="full-width" name="keywords" id="keywords" tabindex="6" cols="72" rows="2"><TMPL_VAR NAME=KEYWORDS ESCAPE=HTML></textarea> <label for="keywords"><MT_TRANS phrase="Tags"></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" /> </div> </TMPL_IF>

※delim: "," で入力の際の区切り文字を指定します。

入力について

文字を入力したら、該当候補が表示されます。

Ctrl+↓ キーを押すと、登録タグ・キーワードの一覧が表示されます。
その他調整に関しては suggest.js 配布サイトを参考に。

■suggest.js - 入力補完ライブラリ

以上

[参考記事]
■drry+@-> Tagwired folksonomy with suggest.js on MT 3.2

2006/11/03 11:57:58：記事書き直し