たろマーク （はてなブックマーク）
-
[ perl ][ angelos ]
-
[ zsh ]
-
[ illust-sozai ]
2006年02月25日
■ MT の検索結果をその場に出す。
初めての Ajax ネタ。prototype.js とか、script.aculo.us とかいじってみようということで手軽に実験できないかなぁと思いついたのが Movable Type の検索結果。
右の検索フォームから検索すると検索結果がフォームの下にズルズル出てきます。
では、解説です。まずは外部 JS ファイルの読み込み。myscripts.js が自分で定義した関数（オブジェクト？）を書いてあるファイル。
<script src="<$MTBlogURL$>js/prototype.js" type="text/javascript"></script>
<script src="<$MTBlogURL$>js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="<$MTBlogURL$>js/myscripts.js" type="text/javascript"></script>
myscripts.js はこんな感じ。一応ソース貼り付けておきます。
var SearchEntry = Class.create();
SearchEntry.prototype = {
initialize: function(form) {
this.entry = $('result');
this.entry.innerHTML='<img src="/js/progress_bar.gif" width="200" height="20">';
Element.show(this.entry);
// var pars = 'IncludeBlogs=1&search=' + $F('search');
var params = Form.serialize(form);
new Ajax.Request("/cgi-bin/mt/mt-search.cgi", {
method: 'post',
parameters: params,
onComplete: this.showresult.bind(this)
});
},
showresult: function(res){
Element.hide(this.entry);
this.entry.innerHTML=res.responseText;
Effect.SlideDown(this.entry);
}
};
prototype.js の使い方とか、何より Javascript がよくわかってないので、Femo のコードを参考にさせていただきました。というかほぼ丸パクリですが。わからないで書いてるのがちょっとアレですが、とりあえず今後使っていくうちにわかれば良いじゃんってことで。
そして、検索結果のテンプレート /path/to/mt/search_templates/default.tmpl です。
<ul class="module-list">
<MTSearchResults>
<li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$> <$MTEntryDate$></a> <$MTEntryEditLink$></li>
<ul>
<li class="module-list-item"><$MTEntryExcerpt$></li>
</ul>
</MTSearchResults>
<MTNoSearchResults>
<li class="module-list-item"><MT_TRANS phrase="Searched for"> "<$MTSearchString$>"</span></li>
<ul>
<li class="module-list-item"><MT_TRANS phrase="No pages were found containing"> "<$MTSearchString$>".</li>
</ul>
</MTNoSearchResults>
<MTNoSearch>
<li class="module-list-item"><MT_TRANS phrase="No pages were found containing"></li>
</MTNoSearch>
</ul>
後は検索フォームをこんな感じにします。
<form action="JavaScript:void(0);" onSubmit="new SearchEntry(this);return false;">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">ブログを検索: </label><br />
<input id="search" name="search" size="20" />
<input type="submit" value="検索" value="検索" />
</form>
<div id="result"></div>
最期の <div id="result"></div> って部分に検索結果が出ます。
| パーマリンク
| 
海賊たろに一言送る
トラックバック
このエントリーのトラックバックURL:
http://vkgtaro.jp/cgi-bin/mt/trackback/544
