2010
03/03
03/03
MTで高速Ajaxブログ内全文検索
MT | written by 村田佑介
このブログ構築の際にブログ内検索をどうしようかと色々調べたところ、いい感じのスクリプトを提供している方がいらっしゃったので拝借しました。
本家：http://java.cocolog-nifty.com/blog/2005/10/javascript_c163.html
パッチ：http://furyu.tea-nifty.com/annex/2006/05/blog_ajax_json__94c8.html
参考：http://bizcaz.com/archives/2006/09/19-231447.php
解説ではprototype.jsを読み込んでいますが、当サイトではJQueryを使っているのでprototype.js読み込みのスクリプトは外しました。
あとは検索結果を一番左のカラムに出したので、もともと左カラムにあった内容はJQueryで消してます。こんな感じ。
--------------------
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#search_button").bind("click",function(){
$("#blog_in").slideUp();
});
});</script>
(中略)
<div class="content"></div><!--←ここに検索結果を表示-->
<div class="blog_in">（中略）</div><!--←ここにコンテンツの内容を表示。検索されると消える。-->--------------------
このブログでも使っていますので、右上の検索ボックスからお試し下さい。
*********************
追記：2010/03/08
*********************上記のスクリプトではエンターボタンで検索した時に左側のコンテンツが消えないので修正しました。
修正箇所：
1.formにid="searchform"を追加
2.スクリプトを下記に変更
--------------------
<script type="text/javascript">
$(function(){
$("#search_button").bind("click",function(){
$("#blog_in").slideUp();
});
$("#searchform").submit(function(){
$("#blog_in").slideUp();
});
});</script>
--------------------
