Movable Type な Blog の全エントリを JavaScript with XMLHttpRequest でインクリメンタル検索する

さて、今日も今日とて JavaScript で遊んでます。Ajax すげー！ っつっても、大きいアプリケーションを作る余裕もないので、今日はこの Blog を XMLHttpRequest を用いてインクリメンタル検索するページを作ってみました。

• 検索画面
  • MTEntrySearch.js [エントリを検索するオブジェクトを生成するスクリプト]
    • MTEntrySearch のドキュメント
  • main.js [実行用スクリプト]
  • エントリのリスト

まず、ページロード時に XMLHttpRequest により、あらかじめテキストファイルとして作成しておいたエントリの一覧を取得、配列にして格納しておきます。そのエントリの一覧は、Movable Type のテンプレートを以下のような感じで作成すれば、エントリを更新するたびに自動的に作成することができます。

<MTArchiveList>
<$MTArchiveLink$><><$MTArchiveTitle$><><$MTEntryDate format="%Y-%m-%d (%a) %H:%M"$>
</MTArchiveList>

んでもって input になにか文字を入力していくたびに、つまり onkeyup イベントが発生するたびに search() メソッドを実行し、入力文字列にマッチするエントリをリストとして書き出します。なんか調整不足で重くなったりするのですが、そこんとこをうまいことやれば、かなりいい感じ。しかし、わざわざ別ページを作らなくても、ちこっと改造すれば Blog ページと同じ場所にインクリメンタル検索ボックスを設置することも可能でしょう（今回は、そこまでやるのがデザイン的な都合で面倒なのでやりませんでしたが）。

つか、MT をインクリメンタル検索するという話、以前、直接 DB にクエリを送って、帰ってきた結果をフレームに表示するという方法で試したことがあったのですが、早くすると DB とのやりとりでエラーを起こすし、ゆっくりやっても重くて使い物になりませんでした。そしたらその道の神であるところの ma.la さんが「あらかじめエントリのリストをクライアントにロードさせておいて、それを検索すればいい」と助言してくださったのを聞いて、僕とごろたん、声をそろえて「やられたー！」と叫ぶ(w

そんなこんなで、あとは「いやなブログ: JavaScript でインクリメンタル grep 検索」を参考にごしゃごしゃとコードを書いてできあがり、ってな感じ。あと、補足しておくと、単にこの Blog が MT なので MTEntrySearch とかゆってますが、当然のことながら、フォーマットを整えたリストさえあれば、他の Blog でも同じように検索することができます。