scriptaculous:オートコンプリート(ローカル)

 入力補助を行うオートコンプリートもscript.aculo.usでサポートされています。ここではサーバーとの通信を行わないで利用できるオートコンプリートのローカル版を使ってみます。ローカル版はAutocompleter.Local()で最初のパラメータが入力補助を行うテキストフィールドのID名、次が候補を表示するタグのID名になります。候補を表示するタグはdivタグになりますが実際にdivタグ内に表示されるのはul, liタグを利用したものになります。このためスタイルはul, liタグに指定しておく必要があります。
Autocompleter.Local()の三番目のパラメータが表示する候補のリストになります。候補のリストは配列形式で指定しておきます。以下のサンプルは英文字だけの候補を表示するものです。(サンプルを実行する

<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 Autocompleter.Local("aWord", "list", ["Asc","Asic","Bin","Codec"], {});
}
// --></script>
</head>
<body>
<h1>scriptaculous.js オートコンプリート(ローカル)</h1>
<form>
<input type="text" id="aWord">
<div id="list"></div>
</form>
</body>
</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 Autocompleter.Local("aWord", "list", ["秋田","岡山","長野","長崎"], {});
}
// --></script>
</head>
<body>
<h1>scriptaculous.js オートコンプリート(ローカル/日本語)</h1>
<form>
<input type="text" id="aWord">
<div id="list"></div>
</form>
</body>
</html>


[目次へ]

(2006.7.4)