入力補助を行うオートコンプリートで入力した文字に応じてサーバー側から必要な候補を返すことができます。ここでは、候補を返すCGIは用意していないので、基本的な仕組みのみ説明します（CGIを用意していないのでサーバー上に用意されたHTMLファイルを取得して候補として表示するだけです）。
Ajax.Autocompleter()で最初のパラメータが入力補助を行うテキストフィールドのID名、次が候補を表示するタグのID名になります。候補を表示するタグはdivタグになりますが実際にdivタグ内に表示されるのはul, liタグを利用したものになります。このためスタイルはul, liタグに指定しておく必要があります。
Autocompleter.Local()の三番目のパラメータが表示する候補を返すサーバーのURLになります。サーバーが返す候補はul, liタグを利用したものにします。以下のサンプルは文字が入力されるとサーバーに問い合わせlist.htmlファイルの内容を候補として表示します。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>オートコンプリート（サーバー）</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript"><!--
window.onload = function()
{
new Ajax.Autocompleter("aWord", "list", "./list.html", {});
}
// --></script>
</head>
<body>
<h1>scriptaculous.js オートコンプリート（サーバー）</h1>
<form>
<input type="text" id="aWord">
<div id="list"></div>
</form>
</body>
</html>
[
目次へ]
(2006.7.4)