てゆーか本当に難しいですよ。JavaScriptってやつは。
【最終形】
prototype.js（v1.6）を使います。
配列の変数に、補完候補を持ちます。。
インプットボックスに入力された文字列とマッチする補完候補があったら、それをリストボックスとして表示します。
そのリストボックスはキーボードの上／下ボタンで選択、TABあるいはENTERキーで決定できます。マウスで選択もできます。
【段取り】
（１）イベントハンドリングの確認
（２）手作りリストボックスの確認
テキストエリアに文字が入力されると、配列の変数にある補完候補をリスト表示する。
（３）補完候補の選択確認
リストされた保管候補を、キーボード、マウスで選択できる。
（４）最終形
テキストエリアに入力された文字列にマッチする補完候補をリスト表示する。
さて、上手くいくかどうか。
【詳細】
（１）イベントハンドリングの確認
テキストボックスにフォーカスが当たったらDIV要素を表示、blurしたらDIV要素を消します。
ディレクトリ構造は以下の通りです。
WebContent
- js/prototype.js
- js/my.js
- a.html
- my.css
■my.js
Event.observe(window, 'load', function(event) {
Event.observe('hoge', 'focus', function(event) {
$('div1').style.visibility = "visible"
});
Event.observe('hoge', 'blur', function(event) {
$('div1').style.visibility = "hidden"
});
});
■my.css
@CHARSET "UTF-8";
#div1 {
visibility:hidden;
}
■a.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/my.js"></script>
<script type="text/javascript">
</script>
<title>Ajax tutorial - a</title>
</head>
<body>
<input type="text" id="hoge" name="hoge" />
<div id="div1">test</div>
</body>
</html>
どうなることやら不安がいっぱいです。
.
0 件のコメント:
コメントを投稿