JavaScript を使用して、自動プロンプトを含むテキスト ボックスを作成し、必要な友人がそれを参照できるようにします。例 1: AJAX 実装を直接記述します。
クライアント：
次のようにコードをコピーします。
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html>
<頭>
<title>Ajax は自動プロンプト テキスト ボックスを実現します</title>
<スタイル>
<!--
体{
フォントファミリー:Arial、Helvetica、サンセリフ;
フォントサイズ:12px; パディング:0px;
}
フォーム{パディング:0px;}
入力{
/* ユーザー入力ボックスのスタイル */
フォントファミリー:Arial、Helvetica、サンセリフ;
フォントサイズ:12px; ボーダー:1px 実線 #000000;
幅:200ピクセル; パディング:1ピクセル;
}
＃ポップアップ{
/* プロンプト ボックスの div ブロックのスタイル */
位置:絶対幅:202px;
色:#004a7e; フォントサイズ:12px;
フォントファミリー:Arial、Helvetica、サンセリフ;
左:41ピクセル; 上:25ピクセル;
}
#ポップアップ.ショー{
/* プロンプト ボックスの境界線を表示します */
ボーダー:1px ソリッド #004a7e;
}
#ポップアップ.非表示{
/* プロンプト ボックスの境界線を非表示にします*/
境界線:なし;
}
/* プロンプトボックスのスタイル*/
ウル{
リストスタイル:なし;
マージン:0px; パディング:0px;
}
li.mouseOver{
背景色:#004a7e;
色:#FFFFFF;
}
li.mouseOut{
背景色:#FFFFFF;
色:#004a7e;
}
-->
</スタイル>
<スクリプト言語=javascript>
var oInputField; //多くの関数で使用されることを考慮して
var oPopDiv; //つまりグローバル変数の形式です
var oColorsUl;
var xmlHttp;
関数 createXMLHttpRequest(){
if(window.ActiveXObject)
xmlHttp = 新しい ActiveXObject(Microsoft.XMLHTTP);
else if(window.XMLHttpRequest)
xmlHttp = 新しい XMLHttpRequest();
}
関数 initVars(){
//変数を初期化する
oInputField = document.forms[myForm1].colors;
oPopDiv = document.getElementById(ポップアップ);
oColorsUl = document.getElementById(colors_ul);
}
関数クリアカラー(){
// プロンプトの内容をクリアします
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = 非表示;
}
関数 setColors(the_colors){
// プロンプト ボックスを表示します。渡されるパラメータは、一致した結果で構成される配列です。
clearColors(); //文字を入力するたびに、続行する前に元のプロンプトをクリアします。
oPopDiv.className = 表示;
var oLi;
for(var i=0;i<the_colors.length;i++){
// 一致するプロンプト結果をユーザーに 1 つずつ表示します
oLi = document.createElement(li);
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi.onmouseover = function(){
this.className = MouseOver // マウスが上を通過すると強調表示されます。
}
oLi.onmouseout = function(){
this.className = MouseOut //終了時に元の状態に戻す
}
oLi.onclick = function(){
// ユーザーが一致する項目をクリックすると、入力ボックスを項目の値に設定します
oInputField.value = this.firstChild.nodeValue;
clearColors(); //同時にプロンプトボックスをクリアします。
}
}
}
関数 findColors(){
initVars(); //変数を初期化する
if(oInputField.value.length > 0){
createXMLHttpRequest(); // ユーザー入力をサーバーに送信します。
var sUrl = 9-10.aspx?sColor= + oInputField.value + ×tamp= + new Date().getTime();
xmlHttp.open(GET,sUrl,true);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var aResult = 新しい Array();
if(xmlHttp.responseText.length){
aResult = xmlHttp.responseText.split(,);
setColors(aResult); //サーバーの結果を表示します。
}
それ以外
クリアカラー();
}
}
xmlHttp.send(null);
}
それ以外
clearColors(); // 入力がない場合 (たとえば、ユーザーが Del キーを押した場合)、プロンプト ボックスをクリアします。
}
</script>
</head>
<本文>
<フォームメソッド=投稿名=myForm1>
色: <input type=text name=colors id=colors onkeyup=findColors() />;
</form>
<div id=ポップアップ>
<ul id=colors_ul></ul>
</div>
</body>
</html>
サーバー側 (9-10.aspx):
次のようにコードをコピーします。
<%@ ページ言語=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@ インポート名前空間=System.Data %>
<%
Response.CacheControl = キャッシュなし;
Response.AddHeader(プラグマ、キャッシュなし);
文字列 sInput = Request[sColor].Trim();
if(sInput.Length == 0)
戻る;
文字列 sResult = ;
string[] aColors = 新しい文字列[]{アリスブルー、アンティークウィズ、アクアマリン、アズール、ベージュ、ビスク、ブラック、ブランチアーモンド、ブルー、ブルーバイオレット、真鍮、ブロンズ、ブラウン、バーリーウッド、カデットブルー、チャートリューズ、チョコレート、銅、コーラル、コーンフラワールー、コーンシルク、シアン、ダークブルー、ダークシアン、ダークゴールデンロッド、ダークグレー、ダークグリーン、ダークキ、ダークマゼンタ、ダークライブグリーン、ダークオーキッド、ダークレンジ、ダークレッド、ダークサーモン、ダークシーグリーン、ダークスレートブルー、ダークスレートグレー、ダークターコイズ、ダークバイオレット、ディープピンク、ディープスカイブルー、ディムグレー、ドジャーブルー、長石、耐火レンガ、フローラルホワイト、フォレストグリーン、フクシア、ゲインズボロ、ゴールド、ゴールデンロッド、ゴーレンロッド、ゴストホワイト、グレー、グリーン、グリーンエロウ、ハニーデュー、ホットピンク、インディアンレッド、アイネン、アイボリー、カーキ、ラベンダー、ラベンダーブラッシュ、ローングリーン、レモンシフォン、ライトブルー、ライトコーラル、ライトシアン、ライトゴデンロッド、ライトゴデンロッドイエロー、ライトグレー、ライトグリーン、lライトピンク、ライトサーモン、ライトシーグリーン、ライトスカイブルー、ライトスレートブルー、ライトスレートグレー、ライトスチールブルー、ライトイエロー、ライム、ライムグリーン、マゼンタ、マゼンタ、マルーム、マルーン、ミディアムアクアマリン、ミディアムブルー、メディウモルキッド、ミディアムパープル、ミディアムシーグリーン、ミディアムスレートブルー、ミディアムスプリンググリーン、ミディアムターコイズ、ミディアムバイオレットレッド、ミッドナイトブルー、ミントクリーム、ミスティローズ、モカシン、ナバホホワイト、ネイビー、ネイビーブルー、オールドレース、オリヴェドラブ、オレンジ、蘭、オレンジ、パレゴデンロッド、ペールグリーン、ペールターコイズ、パレバイオレット、パパイヤホイップ、ピーチパフ、ペルー、ピンク、プラム、パウダーブルー、パープル、クォーツ、レッド、ロージーブラウン、ロイヤルブルー、サドルブラウン、サル月、サンディブラウン、スカーレット、シーグリーン、貝殻、シエナ、シルバー、スカイブルー、スレートグレー、雪、スプリンググリーン、スチールブルー、タン、アザミ、トマト、ターコイズ、バイオレット、バイオレットレッド、小麦、白煙、黄色、黄緑};
for(int i=0;i<aColors.Length;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ,;
}
if(sResult.Length>0) //一致するものがあった場合
sResult = sResult.Substring(0,sResult.Length-1); //最後の数値を削除します。
Response.Write(sResult);
%>
例 2: jQuery を使用して実装します。
クライアント：
次のようにコードをコピーします。
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html>
<頭>
<title>JQuery は自動プロンプト テキスト ボックスを実装します</title>
<スタイル>
<!--
体{
フォントファミリー:Arial、Helvetica、サンセリフ;
フォントサイズ:12px; パディング:0px;
}
フォーム{パディング:0px;}
入力{
/* ユーザー入力ボックスのスタイル */
フォントファミリー:Arial、Helvetica、サンセリフ;
フォントサイズ:12px; ボーダー:1px 実線 #000000;
幅:200ピクセル; パディング:1ピクセル;
}
＃ポップアップ{
/* プロンプト ボックスの div ブロックのスタイル */
位置:絶対幅:202px;
色:#004a7e; フォントサイズ:12px;
フォントファミリー:Arial、Helvetica、サンセリフ;
左:41ピクセル; 上:25ピクセル;
}
#ポップアップ.ショー{
/* プロンプト ボックスの境界線を表示します */
ボーダー:1px ソリッド #004a7e;
}
/* プロンプトボックスのスタイル*/
ウル{
リストスタイル:なし;
マージン:0px; パディング:0px;
色:#004a7e;
}
li.mouseOver{
背景色:#004a7e;
色:#FFFFFF;
}
-->
</スタイル>
<script language=javascript src=jquery.min.js></script>
<スクリプト言語=javascript>
var oInputField; //多くの関数で使用されることを考慮して
var oPopDiv; //つまり、グローバル変数の形式になります。
var oColorsUl;
関数 initVars(){
//変数を初期化する
oInputField = $(#colors);
oPopDiv = $(#popup);
oColorsUl = $(#colors_ul);
}
関数クリアカラー(){
// プロンプトの内容をクリアします
oColorsUl.empty();
oPopDiv.removeClass(show);
}
関数 setColors(the_colors){
// プロンプト ボックスを表示します。渡されるパラメータは、一致した結果で構成される配列です。
clearColors(); //文字を入力するたびに、続行する前に元のプロンプトをクリアします。
oPopDiv.addClass(show);
for(var i=0;i<the_colors.length;i++)
// 一致するプロンプト結果をユーザーに 1 つずつ表示します
oColorsUl.append($(<li>+the_colors[i]+</li>));
oColorsUl.find(li).click(function(){
oInputField.val($(this).text());
クリアカラー();
}).hover(
function(){$(this).addClass(mouseOver);},
function(){$(this).removeClass(mouseOver);}
);
}
関数 findColors(){
initVars(); //変数を初期化する
if(oInputField.val().length > 0){
//非同期データを取得する
$.get(14-10.aspx,{sColor:oInputField.val()},
関数(データ){
var aResult = 新しい Array();
if(data.length > 0){
aResult = data.split(,);
setColors(aResult); //サーバーの結果を表示します。
}
それ以外
クリアカラー();
});
}
それ以外
clearColors(); // 入力がない場合 (たとえば、ユーザーが Del キーを押した場合)、プロンプト ボックスをクリアします。
}
</script>
</head>
<本文>
<フォームメソッド=投稿名=myForm1>
色: <input type=text name=colors id=colors onkeyup=findColors() />;
</form>
<div id=ポップアップ>
<ul id=colors_ul></ul>
</div>
</body>
</html>
サーバー側 (14-10.aspx):
次のようにコードをコピーします。
<%@ ページ言語=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@ インポート名前空間=System.Data %>
<%
Response.CacheControl = キャッシュなし;
Response.AddHeader(プラグマ、キャッシュなし);
文字列 sInput = Request[sColor].Trim();
if(sInput.Length == 0)
戻る;
文字列 sResult = ;
string[] aColors = 新しい文字列[]{アリスブルー、アンティークウィズ、アクアマリン、アズール、ベージュ、ビスク、ブラック、ブランチアーモンド、ブルー、ブルーバイオレット、真鍮、ブロンズ、ブラウン、バーリーウッド、カデットブルー、チャートリューズ、チョコレート、銅、コーラル、コーンフラワールー、コーンシルク、シアン、ダークブルー、ダークシアン、ダークゴールデンロッド、ダークグレー、ダークグリーン、ダークキ、ダークマゼンタ、ダークライブグリーン、ダークオーキッド、ダークレンジ、ダークレッド、ダークサーモン、ダークシーグリーン、ダークスレートブルー、ダークスレートグレー、ダークターコイズ、ダークバイオレット、ディープピンク、ディープスカイブルー、ディムグレー、ドジャーブルー、長石、耐火レンガ、フローラルホワイト、フォレストグリーン、フクシア、ゲインズボロ、ゴールド、ゴールデンロッド、ゴーレンロッド、ゴストホワイト、グレー、グリーン、グリーンエロウ、ハニーデュー、ホットピンク、インディアンレッド、アイネン、アイボリー、カーキ、ラベンダー、ラベンダーブラッシュ、ローングリーン、レモンシフォン、ライトブルー、ライトコーラル、ライトシアン、ライトゴデンロッド、ライトゴデンロッドイエロー、ライトグレー、ライトグリーン、lライトピンク、ライトサーモン、ライトシーグリーン、ライトスカイブルー、ライトスレートブルー、ライトスレートグレー、ライトスチールブルー、ライトイエロー、ライム、ライムグリーン、マゼンタ、マゼンタ、マルーム、マルーン、ミディアムアクアマリン、ミディアムブルー、メディウモルキッド、ミディアムパープル、ミディアムシーグリーン、ミディアムスレートブルー、ミディアムスプリンググリーン、ミディアムターコイズ、ミディアムバイオレットレッド、ミッドナイトブルー、ミントクリーム、ミスティローズ、モカシン、ナバホホワイト、ネイビー、ネイビーブルー、オールドレース、オリヴェドラブ、オレンジ、蘭、オレンジ、パレゴデンロッド、ペールグリーン、ペールターコイズ、パレバイオレット、パパイヤホイップ、ピーチパフ、ペルー、ピンク、プラム、パウダーブルー、パープル、クォーツ、レッド、ロージーブラウン、ロイヤルブルー、サドルブラウン、サル月、サンディブラウン、スカーレット、シーグリーン、貝殻、シエナ、シルバー、スカイブルー、スレートグレー、雪、スプリンググリーン、スチールブルー、タン、アザミ、トマト、ターコイズ、バイオレット、バイオレットレッド、小麦、白煙、黄色、黄緑};
for(int i=0;i<aColors.Length;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ,;
}
if(sResult.Length>0) //一致するものがあった場合
sResult = sResult.Substring(0,sResult.Length-1); //最後の数値を削除します。
Response.Write(sResult);
%>