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>
*なんとなく、おかしい部分がある気が。。。

sponsors

「Movable Typeのサイト内検索をAJAXで高速化する」をシェアする

記事作成:
記事URL:

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