Ajaxベースのオートコンプリータの使用
このタイプのオートコンプリータの動作は次のようになります。ユーザーが一定の文字数を入力すると、入力された文字列に一致するデータを取得するために非同期の要求を開始します。もちろん、サーバーサイドの処理を記述するための言語／テクノロジはJSP、サーブレット、ASP.NETなど、自分にとって都合のよいものを使ってかまいません。本稿ではPHPを使用します。
Script.aculo.usを使用する場合、AjaxベースのオートコンプリータはAjax.Autocompleterクラスを使って作成できます。次に例を示します。
new Ajax.Autocompleter(
'autoCompleteTextField',
'autoCompleteMenu',
'countries-list.php',
{
minChars: 1
}
);
コンストラクタに渡すパラメータは次のとおりです。
- ユーザーが文字を入力するテキストボックスの名前
- アイテムのリストが入る<div>のID
- 要求の送信先となるサーバーサイドコンポーネントのURL
- オートコンプリータのカスタマイズに使用できるオプションを示す、任意指定のリテラルオブジェクト（後述）
まだよくわからなくても気にしないでください。次の例で、どのような仕組みになっているのか説明します。今回は国名リストのオートコンプリータを作成するものとします。これを達成するために必要なコードをリスト1に示します。
<html> <head> <style type="text/css"> div.auto_complete { width: 350px; background: #72f068; font-size: 9pt; color: #234e87; font-family: arial; } div.auto_complete ul { border:1px solid #888; margin:0; padding:0; width:100%; list-style-type:none; } div.auto_complete ul li { margin:0; padding:3px; } div.auto_complete ul li.selected { background-color: #234e87; color: #fff; } div.auto_complete ul strong.highlight { color: #800; margin:0; padding:0; } </style> <script type="text/javascript" src="../scripts/prototype.js"></script> <script type="text/javascript" src="../scripts/script.aculo.us.js?load=effects,controls"> </script> <script type="text/javascript"> function buildAutocompleter() { new Ajax.Autocompleter( 'autoCompleteTextField', 'autoCompleteMenu', 'countries-list.php' ); } Event.observe(window, "load", buildAutocompleter); </script> </head> <body> <div> <label>Text field:</label> <input type="text" style="width: 300px;" id="autoCompleteTextField" name="autoCompleteTextField"/> <div id="autoCompleteMenu" class="auto_complete"> </div> </div> </body> </html>
リスト1のコードは「ajax-autocomplete.htm」ファイルに入っています。CSSセクションは、<div>にWeeFlyと同じような外観を与える働きをします（CSSコードの詳細については本稿では説明しません）。
<body>セクションはごく簡単です。ここにはラベル、テキストボックス、そして一致したアイテムが入る<div>が含まれます。中心的な関数はbuildAutocompleterで、これはウィンドウのロード時に呼び出されます（Prototypeフレームワークで提供されるEvent.observeメソッドのおかげです）。
ご覧の通りbuildAutocompleterはAjaxベースのオートコンプリータを作成し、そこにテキストボックス、<div>、およびデータを取得するために呼び出すコンポーネントをアタッチします。Ajax.Autocompleterはサーバーの応答が次の形式になっていることを想定しています。
<ul> <li>Item1</li> <li>Item2</li> ... </ul>
つまり、サーバー応答は単純な「HTML順序なしリスト」です。リスト2に、本稿のダウンロードサンプルに収録されている「countries-list.php」のコードを示します。
<?php
require_once("countries.inc.php");
if(!isset($_REQUEST["autoCompleteTextField"]))
{
die();
}
$chars = $_REQUEST["autoCompleteTextField"];
$listToReturn = array();
foreach($list as $name)
{
if(strtolower($chars) ==
substr(strtolower($name), 0, strlen($chars)))
{
$listToReturn[] = $name;
}
}
if(count($listToReturn) == 0)
{
die();
}
echo "<ul>";
foreach($listToReturn as $item)
{
echo "<li>" . $item . "</li>";
}
echo "</ul>";
?>
このPHPスクリプトは、ユーザーが入力した文字列を取得し、ユーザーの要求と一致する国名の順序なしリストを組み立てます。なお、この国リストは「countries.inc.php」ファイル内にハードコーディングされています。現実のアプリケーションでは、このリストはデータベース、XMLファイル、またはその他の柔軟なデータストアに格納することになるでしょう。図2に、このPHPスクリプトによって表示される画面の例を示します。
では、サーバー応答が単純なHTML順序なしリストではなく、XMLやJSONだったらどうなるでしょう。心配はいりません。本稿の終わりまでお読みになれば、Script.aculo.usで提供されるオートコンプリータをベースにして、どんなタイプの応答でも処理可能なオートコンプリータを開発できるようになるはずです。さしあたり、オートコンプリータのカスタマイズ方法を見ていくことにしましょう。
