« 2007年02月 | ▲トップ | 2008年02月 »

2007年03月02日

Ajaxによる高速サーチの導入

参考サイト
風柳亭 - 別館:書庫のある庵 -:blog_ajax_json_search.jsにパッチ:コメントも含めて検索
暴想:ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript

●以下をまず入手(prototype.jsはともかく、blog_ajax_json_search.jsはDigicloにより改変されています)

prototype.js

blog_ajax_json_search.js

●検索用データを抽出するテンプレートを作成

インデックステンプレートとして新規に検索データ抽出を作成、出力ファイル名はsearch_data.txtとして以下の内容で作成。インデックステンプレートに連動して再構築をする設定とすること。

 <?xml version="1.0" encoding="utf8"?>
{
data:[
<MTEntries all="1">{
title:"<$MTEntryTitle remove_html="1" encode_js="1"$>"
,link:"<$MTEntryLink$>"
,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>"
},</MTEntries>
{title:"",link:"",body:""}
]
}

●呼び出し用検索窓作成

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>blog_ajax_json_search.js"></script>
<form action="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );">
<input type="text" id="search_box" value="" />
<input type="button" id="search_button" onclick="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" onkeypress="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" value="検索" />
</form>

●表示領域の作成
各テンプレートの任意の表示したい位置を<div class="result"></div>で囲む。

サイトを再構築することで利用可能となる。

注意点

エントリーを追加した後、search_data.txtを再構築しなければ検索に反映しないので注意。