skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

Movable Typeのサイト内検索をAJAXで高速化する

｜ ｜ ｜ ｜ ｜ ｜ ｜

Movable Typeの記事が増えると、デフォルトのサイト内検索ではどんどん検索スピードが低下していきます。
当ブログも記事が増えたこと、また検索が使用されるケースが増加していることから、サイト内検索の高速化を試みました。
参考サイト：ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript

使用方法
1. テンプレートの新規作成を行います
search_data.txtとし、以下を記述します。
<?xml version="1.0" encoding="utf8"?>
{
data:[
<MTEntries lastn="0">{
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:""}
]
}
2. 検索フォームを変更
Ajaxの代表的javascriptライブラリ「prototype」を使用します。
<script type="text/javascript" src="http://jyourdomain/prototype.js"></script>
<script type="text/javascript" src="http://java.cocolog-nifty.com/blog/files/javascript/blog_ajax_json_search.js"></script>
<form action="javascript:blogAjaxJsonSearch( '/search_data.txt', document.getElementById('search_box').value );"><input type="search" id="search_box" value=""><input type="button" id="search_button" onclick="javascript:blogAjaxJsonSearch( '/blog/search_data.txt', document.getElementById('search_box').value );" value="検索"></form>
3. 検索結果を表示
最後に検索結果を表示する場所を以下のように書きます。
<div class="content"></div>
＊なんとなく、おかしい部分がある気が。。。

記事作成：2007年11月30日

前の記事：Dockメニューを上下に設置するjavascript「CSS Dock Menu」
次の記事：開閉するサイドバーを作成するjavascript「PBB SideBar」