Autocompletion - libnitsuji.so

今日はscript.aculo.usのAutocompletionです。テキストボックスに文字をいくつか入力したとき、それにマッチする候補を表示してくれてその中から選ぶことができたりするあれです。Google Suggestに使われているようなやつです。
Ajax.Autocompleterというオブジェクトを使います。これはcontrols.jsに実装されているんだけど内部でEffectオブジェクトを使っているのでeffect.jsも読み込んでおく必要があります。




...
<input id="location" name="location" size="30" type="text" value="" />
<div class="auto_complete" id="location_auto_complete"></div>
<script type="text/javascript">
new Ajax.Autocompleter('location', 'location_auto_complete', '/misc/auto.cgi', {})

こんな感じで使います。あとはサーバー側で候補リストを返すようにします。こんな感じで。

<ul>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
</ul>

そうすると、このリストがそのままauto_completeなdiv要素に挿入されます。選択中のli要素にはselectedというクラス名が割り当てられます。あとはスタイルシートで見た目を整えてやれば完成。たとえばこんな感じで。

<style type="text/css" media="screen">
/* <![CDATA[ */
	body {
		font-family: verdana, sans-serif;
		font-size: 12px;
	}
	.auto_complete {
		border: 1px solid black;
		background-color: #eee;
	}
	.auto_complete ul {
		margin: 0;
		padding: 0;
	}
	.auto_complete li {
		list-style-type: none;
	}
	.auto_complete li.selected {
		background-color: #00f;
	}
/* ]]> */
</style>

ところで、上のHTMLでinput要素がlocationとなっているのには訳があります。
Geocoding - 住所から緯度経度を検索
という、経度、緯度情報を返してくれるREST APIがあるんだけど（たぶん個人運営）、ここで1つの地名に対して複数の候補がある場合にこのオートコンプリートを使って候補を表示してやれば使い勝手がいいぞと思った次第、だったのだけれど、リンク先のサイトに明記されているように、

XML出力までに３?５秒かかりますので、５秒間に１回以上のアクセスは極力避けてください。お願いします（土下座）。

レスポンスが悪いので諦めたというわけ。
というわけで、
http://takatoshi.dyndns.org/examples/scriptaculous/autocomplete/autocompletion.html
どんな入力でもレスポンスは変わりません。