テキストボックスプルダウン （改良版）
■これ何？
HTMLのテキストボックスに検索機能付きプルダウンを追加します。
次のサイトを参考にして作成しました。
http://itpro.nikkeibp.co.jp/article/COLUMN/20060115/227278/
■特徴
<div>をおかないので，表形式フィールドに対応できます。
キーボードで操作可能です。⇒改良
AJAX＋DWRを利用しています。⇒改良
■必要なファイル
/ajax/initcompletion.js
/ajax/prototype.js
■操作方法
マウスオーバー ：選択色が変化します。
マウスアウト ：選択色が戻ります。
マウスクリック ：値の確定
↓キー ：選択色が下へ移動します。
↑キー ：選択色が上へ移動します。
ESCキー ：プルダウンが消えます。
Enterキー ：値の確定
■機能一覧
//プルダウンデータをクリアする
text_pulldown.clearCompletionItems
//横幅をセットする
text_pulldown.setCompletionWidth
//高さを設定する（スクロールがある場合）
text_pulldown.setCompletionHeight
//フォントサイズを設定する
text_pulldown.setCompletionFontSize
//設定を超える行数がある場合スクロールバーを付ける
text_pulldown.setCompletionLine
//プルダウンを表示する
text_pulldown.showCompletionItems = function (ary, callback) {
//プルダウンにフォーカスを移す
onFocus()
//TABの時プルダウンをクリア，エンターの時フォーカスプルダウンへ移す
keydownEvent()
//最後にフォーカスがあたったコントロールの名称を返す（汎用）
lostFocusNext()
■使い方
（1）呼び出し側
function initPulldown(obj) {
if(text_pulldown != null) {
text_pulldown.clearCompletionItems();
}
thisform = document.forms[0];
text_pulldown = obj; //プルダウンを設定するテキストボックス
initCompletion(text_pulldown, “div_field_name”); //プルダウンを作成する
text_pulldown.setCompletionWidth(”5cm”); //設定：プルダウンの横幅（必須）
text_pulldown.clearCompletionItems();
createPulldown(text_pulldown.value); //プルダウンを表示する
}
（2）プルダウンを表示する
function createPulldown(str_value) {}
function setPulldownInfo(data) {}
（4）キーボード操作により確定された場合の処理
function setField(data) {
var tmp = data.split(”\t”);
document.getElementById(”xxx”).value = tmp[0];
document.getElementById(”yyy”).value = tmp[1];
}
※キーボードを利用しない場合でもこのメソッドは置いてください
例： function setField(data) {}
（5）JSP側の書き方
<body onclick="lostPullDown();">
<html:text name="form_name" property="field_name" onfocus="initPulldown(this);" onkeydown="keydownEvent();"/>
</body>
■DWRの戻り値
次の様なリストを作成して，レスポンスしてください。
VALUE11<TAB>VALUE12
VALUE21<TAB>VALUE22
VALUE31<TAB>VALUE32
VALUE41<TAB>VALUE42
・
・
■既知の問題点
・Key操作でスクロールの速度がフォントサイズによって変化する
※15pxで利用すると大丈夫です。
以上