いろんなプログラムコードを書いていると本当に頭がおかしくなりそうです。私自身最近並行して書いているスクリプトはPHP、Perl、Javascript、これをプログラムコードと言ってよければMTタグとSmarty、おまけにObject-Cももっと勉強しなくてはならんし、データベースだってMySQLとSQL Liteということになって複数にまたがる可能性が100％でしてもう嫌になります。
　しかし幸いなのは複数のコードが書けることである程度いろんなことができるということですね。

　今回はAjax的にリアルタイムに検索できるという検索システムの原型みたいなものを紹介します。リアルタイム検索なので結構楽しいといいますか、使い勝手はいい感じです。
　通常検索と言われるシステムは、サーバーサイドスクリプトでもって「検索フィールドに言葉を入力」してから「データベースを探して」、マッチしていたら「表示」というようなプロセスを踏みますがAjaxの場合は殆どリアルタイムにデータベースを検索します。
　ちなみにサーバー負荷を測定してみたらAjax自体がクライアントサイドのスクリプトなのでデータベース検索での負荷しかかかっていませんでした。つまり通常のサーバーサイドスクリプトの負荷以外はかからないということです。なかなかいいです。
　ややこしい説明はどうでもいいので、サンプルを見てみてください。

• Sample Demo

　ここではomnioo lab.のブログタイトルを検索しています。（ここではただの説明なので特にリンクとか作っていないので実用的ではありませんが...。）検索フィールドに適当な語句を入れると検索がすぐにはじまります。語句に部分的にでもマッチしたものをリストアップしてゆきますので長い語句を入れればいれるほど検索対象が絞られてゆくという仕組みになっています。
　検索文字列には、「ハイビスカス」とか「美しい風景」とかおよそ私のブログと関係のないキーワードではマッチングしません。できるだけIT関係の語句を入れて試してみてください。
　このDemoに見られるようなシステムはAjaxとPHP、MySQLデータベースを組み合わせて作ります。比較的簡単だったので作り方を紹介します。

1. 検索フィールドを作成する
2. 検索スクリプトを作成する
3. 検索スクリプトの結果表示をAjaxで行う

検索フィールドを作成する（index.php）

　通常のHTMLでもってこんな感じで作ります。このHTMLの特徴はfomの中にあのaction=""がないってことです。リアルタイムで検索するので次のファイルにポストしないんです。なのでこんなへんてこな感じになります。ここではjQueryを利用しますので各要素にidを割り振っておきます。
　また、<div id="search_results"></div>は中身がありませんが検索結果をjQueryでもって表示させる場所になります。

<form id="searchform" method="post">
    <label for="search_term">Blog Title</label>
    <input type="text" name="search_term" id="search_term" />
    <input type="submit" value="search" id="search_button" />
</form>

<div id="search_results"></div>

検索スクリプトを作成する（search.php）

　次に実際にデータベースを検索するシステムをPHPで作成します。ここでは単純にテーブルのカラムからマッチした文字列を返すようなものにしてありますが、実際は様々なテーブルからand or検索などでもっと複雑なルーチンになることと思います。
　ここでは既に存在するMovable Typeのデータベースを利用しています。MTのエントリーは指定のデータベースからmt_entryというテーブルにアクセスします。

<?
# 接続情報の準備
$db_user = 'username';
$db_passwd = 'password';
$db_host = 'localhost';
$database_name = 'username_db';

# DBに接続開始
$db = mysql_connect ($db_host, $db_user, $db_passwd);
mysql_query("set names utf8");
mysql_select_db($database_name);//データベース選択

# POSTを取得
$term = strip_tags(substr($_POST['search_term'],0,100));
$term = mysql_escape_string($term);

# SQL文の発行
$sql = "select entry_title
from mt_entry
where entry_title like '%$term%'";
$result = mysql_query($sql);

# 結果文字列の初期化
$string = '';

# 結果文字列の表示
if (mysql_num_rows($result) > 0){
    while($row = mysql_fetch_object($result)){
        $string .= "<b>".$row->entry_title."</b> - ";
        $string .= "<br/>\n";
    }
} else {
    $string = "マッチした項目がありません。";
}

echo $string;
?>

　まずはデータベースに接続の準備をします。データベースに接続できたらポストからもらってきた値を処理します。HTMLの検索フィールドでは、<input type="text" name="search_term" id="search_term" /> というように書きました。ここに検索ワードが与えられるのですが、ここでは$termという変数にポストされた値を（フィルターをかけつつ）入れてしまいます。
　検索ワードが得られたら、今度はそのワードをSQL文に入れてMySQLから検索を実行します。コツはwhere entry_title like '%$term%'という風に曖昧検索することです。%を前後において文字列中程でマッチしても取得できるようにします。ここらあたりは殆どMySQLの知識内のことです。マッチした値（つまり、ブログのタイトル）は、$stringに全部ぶち込んでやります。

while($row = mysql_fetch_object($result)){
　　$string .= "<b>".$row->entry_title."</b> - ";
　　$string .= "<br/>\n";
}

　この$stringの表示制御をすればできあがりです。あらかじめ$stringにちゃんと文字列が入ってくるかどうかを確認しておくとよいです。

検索スクリプトの結果表示をAjaxで行う

　最後にindex.phpにjQueryのコードを加えて検索フィールドからリアルタイムにsearch.phpを動かせるようにします。まずはjQueryを読み込みます。ここでもやっぱり便利なGoogleのライブラリーを拝借。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

　自身でダウンロードして使用することもできますが、面倒なのでこれが一番いいです。
　そしてこれを付け加えます。

<script type='text/javascript'>
$(function(){
$("#search_results").slideUp();
    $("#search_button").click(function(e){
        e.preventDefault();
        ajax_search();
    });
    $("#search_term").keyup(function(e){
        e.preventDefault();
        ajax_search();
    });

});
function ajax_search(){
  $("#search_results").show();
  var search_val=$("#search_term").val();
  $.post("./search.php", {search_term : search_val}, function(data){
   if (data.length>0){
     $("#search_results").html(data);
   }
  })
}
</script>

　話が前後してしまいますが、主な機能としては検索ワードをポストしてその結果をsearch.phpから取得してAjax的にindex.phpに表示させるというのがその流れです。
　このコードでは結果の表示云々に関わらずますは$("#search_results").slideUp(); でもって結果を表示させています。同然最も最初のアクセスでは検索するワードがないために何も表示されません。次にサーチボタンが押された時にデータベース検索を開始しています。ajax_search();という関数の中にそのデータベース検索の中身が記述されています。で、e.preventDefault();は何だ？という感じですが、イベントがキャンセルされた場合の挙動を定義しています。
　データベース検索では、var search_val=$("#search_term").val();でもって、フィールドから直接検索ワードを取り出しています。検索ボタンを押した時点（イベント発生）でinputフィールドの値を取り出すわけです。PHPでもって$_POSTに値を渡すだけがPHPではなくjQueryで直接値を取り出すことができます。そして、$.post("./search.php", {search_term : search_val}からめでたくsearch.phpというルーチンに取得した検索ワードを投げてやります。jqueryからsearch.phpにポストできるわけです。
　リアルタイムというだけあってすぐさまその検索内容が返ってきますので、dataとして取り出します。何らかの値があればHTML出力します。というのは検索した値が存在したら<b></b>でもってHTMLタグを与えて出力していたのでここでは.html()を利用しています。
　PHP、MySQL、jQueryと三つを組み合わせて使用したことがなくてもそれぞれを独立して熟知している方にはそんなに難しくないコードになっています。いろいろなものが作れそうです。