使い方(タグ検索) ※1番目と2番目は前回の記事 ⇒と同じです。

1. ajax_search.jsをヘッダー内（別にヘッダーじゃなくても良いですけど）に読み込む
   

   <script type="text/javascript" src="/js/sample.js"></script>

2. 新規インデックステンプレートを作成して、下記ソースを貼り付ける。ファイル名はsearch_data.jsonでドメイン直下に作成してください。変える場合はJSの46行目のパスを変更してください。
   

   {
   	data:[
   		<MTEntries lastn="0">{
   			title:"<$MTEntryTitle remove_html="1" encode_js="1"$>"
   			,link:"<$MTEntryLink$>"
   			,date:"<$MTEntryDate format="%Y/%m/%d-%X"$>"
   			,body:"<$MTEntryBody remove_html="1" encode_js="1"$><$MTEntryMore remove_html="1" encode_js="1"$><MTComments>【<$MTCommentAuthor remove_html="1" encode_js="1"$>】<$MTCommentBody remove_html="1" encode_js="1"$></MTComments>"
   			,tag:"<MTEntryTags glue=","><$MTTagName$></MTEntryTags>"
   		},</MTEntries>
   		{title:"",link:"",date:"",body:"",tag:""}
   	]
   }

   んで、再構築。それから再構築の設定は、インデックス・テンプレートの再構築時に、このテンプレートも自動的に再構築されるようにしておく。（私はダイナミックパブリッシングなんで関係ありませんが。）こいつが検索する中身になるというわけです。
3. タグを表示させている部分をclass:tagAreaで囲む。私のブログだと以下みたいな感じです。
   

   <MTEntryIfTagged>
   <div class="tagArea">
   <dl class="tag">
   <dt>This Entry's Tag</dt>
   <dd><MTEntryTags glue=','><a href="<$MTTagSearchLink$>&IncludeBlogs=<$MTBlogID$>" title="タグ：<$MTTagName$>の一覧" class="tagLink"><$MTTagName$></a></MTEntryTags></dd>
   </dl>
   <!--/tagArea--></div>
   </MTEntryIfTagged>

   重要なのはclass:tagAreaで囲むことなので、タグを表示させるコードとかはご自由に。
4. aタグにclass:tagLinkを付与します。
   

   <MTEntryTags glue=','><a href="<$MTTagSearchLink$>&IncludeBlogs=<$MTBlogID$>" title="タグ：<$MTTagName$>の一覧" class="tagLink"><$MTTagName$></a></MTEntryTags>

   念のため、補足しておくと、aタグのあとにspanタグとかでタグはマークアップしないでくださいね。JavaScriptでclass:tagLinkがあるaタグの中身を検索キーワードとしているのでspanタグとかで囲むとうまく動作しないと思います。

これでタグ検索がAjax化されますた！オメデトウ！簡単だよね！？前回と同じく、JavaScriptが無効な環境では、デフォルトのMTの検索機能が働くようになります。
そして、検索結果のコードは以下のような感じ。

<div class="tagArea">
<p>このへんにエントリーに付けられたタグが表示される。</p>
<div class="tagResult">
<dl>
<dt>タグ「タグワード」が含まれているエントリー一覧</dt>
<dd><ol>
<li class="even"><a href="エントリーの詳細ページ" title="エントリータイトルの詳細へ">エントリータイトル - 投稿日時</a></li>
<li class="odd"><a href="エントリーの詳細ページ" title="エントリータイトルの詳細へ">エントリータイトル - 投稿日時</a></li>
</ol></dd>
</dl>
<p class="close">Close</p>
</div>
<!--/tagArea--></div>

それぞれのtagAreaブロックの中に検索結果が追加で表示されるって感じです。
そんでもって、liタグには前回同様、奇数と偶数で違うクラスが付与されるので、シマシマやりたい人はCSSでどぞー。
また、Closeボタンを押すとclass:tagResultが消えます。

主な変更点

1. prototype.jsなしでも動くように
2. それに伴って基本的にJSコードは大幅に改変（ヘタレなんで改悪されているかもしれない！)
3. 検索結果のコードを変更しまくりんぐ。
4. JavaScriptが無効な場合はデフォルトのMTの検索機能が動くように
5. 検索ワードが入力されていない場合は、json(検索の中身)を読みにいかずに、すぐに検索エラーのレスポンスを出すようにしました。
6. json(検索の中身)にタグと投稿日時を追加
7. タグ検索機能の追加

あまり原型をとどめてないです。。。(勉強が主な目的だからね!)ただ、検索結果のハイライトとか記事の抜粋まわりはまんま使用させてもらいます。とっても分かりやすかったもんで。なんかバグとかあったら報告してくれると泣きながら直すと思います。

使う人がいるかどうか分かりませんが、JSファイルやら参考ソースなど一式を置いておきます。JSファイルの頭のライセンスとかを消しさらなければ特に使用の制限はありませーん。

ajax_search.zip

ちなみに、動作を確認したのは以下のブラウザ。（でもそんな入念にテストしたわけじゃないので、どっかおかしいところがあるかもしれません。あったら遠慮なくクレームを！

対象ブラウザ

• WindowsIE6,7
• Firefox2以上
• Opera9.5以上
• Safari3以上

最後にもう1度元ネタのご紹介

元ネタの作品

大元は暴想さんのblog_ajax_json_search.jsというもの。
で、それをDakinyさんがカスタマイズ。
さらにWWW Watchさんがカスタマイズしたものを使用しています。

大変勉強になりました。ありがとうございます。

あとはコメントまわりもAjax化したいお！（コメントとかされないじゃんとかいうことはこの際無視。)