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

前回のキーワード入力候補機能とはまた、異なる方式の入力補完機能です。

下記エントリーにて紹介しているカスタマイズを施している事が前提です。
[関連]Tagwire+mt-xsearchでTag Cloudを作成する

機能概要

日本語対応(2byte文字対応)
キーワード一覧表示
入力候補表示
入力区切り文字指定
edit_entry.tmpl 要改変

必要ファイルの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 = [&lt;MTTags glue=","&gt;

 '&lt;MTTag encode_js="1"&gt;'&lt;/MTTags&gt;
];

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：記事書き直し

キーワード入力補完機能をつける(2)

必要ファイルのDL

テンプレート作成

edit_entry.tmpl の修正

入力について

カテゴリ

トラックバック(0)

About This Site