Ajaxによる非同期で入力可能なドロップダウン（コンボボックス）

テキストボックスにある桁数以上の入力（*1）を行うと、Ajaxを利用し非同期でCGIにQueryString付きの問合せを行い、返されたXML情報を選択可能な一覧として表示します。 一覧は↑↓キー＆Enterもしくはマウスクリックで選択する事が出来ます。
*1） 大量情報を扱う場合にある程度の絞込み時点で動作させる場合の設定で任意数に変更可能

動作サンプル

郵便番号の入力で住所を表示する場合のサンプルです。郵便番号を3桁以上入力すると一覧が表示されます。（ハイフンは不要）

入力と設定のテキストボックスを分けた場合

郵便番号:
住所:

入力と設定のテキストボックスを同じにした場合

郵便番号および住所入力欄:

動作サンプルは大量のデータを扱う状況を想定し、郵便番号データは日本郵政公社のデータファイル（全国一括および事業所郵便番号）約14万件の情報を利用しています。
これをajaxを利用せずにJavaScriptだけで同一の実装をすると、HTML上に大量の情報を非表示で持たせる事になりレスポンスの問題が発生する事になるかと思います。

導入方法

  1. CGI側としてデータベースかテキストファイルからQueryStringの情報を元に絞込みを行い結果をXML（サンプル）で出力する処理を作成します。

  2. htmlヘッダにJavaScriptを追記します。 
    
<script type="text/javascript" src="_AjaxComboBox.js"></script>
  3. 入力と設定用のテキストボックスとリスト用のHTMLタグを記載します。 
    
<input type="text" name="zip" id="zip" />
<div id="layer" style="display:none">list</div>
  4. AjaxComboBoxを呼び出して設定します。 
    
<script type="text/javascript"><!--
	var a = new AjaxComboBox({
	inputID:'zip', --入力inputのID
	listID:'layer', --リスト用のdivのID
	setID:'zip', --設定inputのID
	URL:'http://***/***.cgi', --ajax通信を行うURL
	URL_Querystring:'zip', --ajax通信を行うQueryString
	ExecuteInputLength:3, --入力inputのajax通信を行う条件の文字数
	isScrollbar:true, --リストにスクロールバーを付けるか
	listHeight:'300', --リストの最大高さ
	listWidth:'500' --リストの幅
	});
// --></script>

--サーバへのアクセスは[URL]?[URL_Querystring]=[inputIDのvalue値]で通信されます。

ダウンロード

AjaxComboBox

ライセンス

使用の制限は一切ありません。改造・機能追加・他の製品との併用や販売にも制限がありません。 ただし、本処理の使用によるいかなる損害や障害が発生しようとも当社は一切の責任を負いません。

補足

Ajax関係はjQueryをはじめ様々な便利なライブラリがある為、そちらを利用するケースがほとんどかと思います。 しかしライブラリを使いこなす為には、動作原理をある程度知っておく必要があると考えています。本処理は[クラス化]、[XMLHttpRequests通信]、[イベント処理]、[document.createElementによるエレメントの動的作成]をできるだけ単純な作りで作成していますので基本的な概念の理解に利用する事も可能かと思います。