JS は自動プロンプトを備えたテキスト ボックス効果を実装します

2 つの自動プロンプト テキスト ボックス効果の JS 実装コードを共有します。

例 1、AJAX 実装を直接記述します。 クライアント：

 自動プロンプト用の Ajax テキスト ボックス_bbs.it-home.org
body{
font- family:Arial、Helvetica、sans-serif;
font-size:12px; margin:5px;
form{padding:0px;}
/* ユーザー入力ボックスのスタイル* /
フォントファミリー:Arial、ヘルベチカ、サンセリフ;
フォントサイズ:12px; 余白:1px;
#popup;プロンプトボックスの div ブロックのスタイル*/
position:absolute; width:202px;
font-family:Arial、Helvetica、sans-serif; ;
}
#popup.show{
/* プロンプト ボックスの境界線を表示*/
border:1px Solid #004a7e;
}
#popup.hide{
/* プロンプト ボックスの境界線を非表示にする*/
 border:none;
}
/* プロンプトボックスのスタイル*/
list-style:none;
li.mouseOver{
background-color:#004a7e; color:#FFFFFF;
li.mouseOut{
background-color:#FFFFFF;
}

var oInputField; //
var oPopDiv が多くの関数で使用されることを考慮すると、これはグローバル変数の形式になります
var xmlHttp;
if(window.ActiveXObject) xmlHttp = new ActiveXObject ("Microsoft. ].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
function clearColors(){
//プロンプトをクリアコンテンツ
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = "隠す"; setColors(the_colors){
//プロンプト ボックスを表示します。渡されるパラメーターは一致する結果の配列です
clearColors(); //文字を入力するたびに、続行する前に元のプロンプトをクリアします
oPopDiv.className = "show" ;
var oLi;
 for(var i=0;i// 一致するプロンプト結果を 1 つずつユーザーに表示します
oLi = document.createElement("li"); appendChild(oLi);
oLi .appendChild(document.createTextNode(the_colors[i]));
oLi.onmouseover = function(){
this.className = "mouseOver"; // マウスが上を通過したときに強調表示します
 oLi.onmouseout = function(){
this.className = "mouseOut"; //終了時に元の状態に戻す
}
oLi.onclick = function(){
//ユーザーが一致する項目をクリックすると、入力ボックスを item の値に設定します
oInputField.value = this.firstChild.nodeValue;
clearColors(); //同時にプロンプ​​トボックスをクリアします
}
}
}
function 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 = new Array();
if (xmlHttp.responseText.length){
aResult = xmlHttp.responseText.split(",") //サーバーを表示results
} bbs.it-home.org
else
clearColors();
 }
}
xmlHttp.send(null); // 入力がない場合はプロンプト ボックスをクリアします (たとえば、ユーザーは del キーを押します)


 input type="text" name="colors" id="colors" onkeyup="findColors(); / >  "colors_ul"  /html>


服务器端（9-10.aspx ）： 
 



Response.CacheControl = "キャッシュなし";
Response.AddHeader("プラグマ","キャッシュなし");
string sInput = Request["sColor"].Trim();
if(sInput.Length == 0)
return;
文字列 sResult = "";
string[] aColors = new string[]{"アリスブルー"、"アンティークウィズ"、"アクアマリン"、"アズール"、"ベージュ"、"ビスク"、"ブラック"、"ブランシュアーモンド"、"ブルー"、"ブルーバイオレット" 、「真鍮」、
「ブロンズ」、「ブラウン」、「バーリーウッド」、「カデットブルー」、「シャルトルーズ」、「チョコレート」、「銅」、「コーラル」、「コーンフラワーブルー」、「コーンシルク」、「シアン」、
「ダークブルー」、「ダークシアン」、「ダークゴールデンロッド」、「ダークグレー」、「ダークグリーン」、「ダークキ」、「ダークマゼンタ」、「ダークライブグリーン」、「ダークオーキッド」、
「ダークレンゲ」、「ダークレッド」、「ダークサーモン」、 "darkseagreen"、"darkslateblue"、"darkslategray"、"darkturquoise"、"darkviolet"、"deeppink"、
"deepskyblue"、"dimgray"、"dodgerblue"、"feldspar"、"firebrick"、"floralwhite"、"フォレストグリーン"、"フクシア"、"ゲインズボロ"、"ゴールド"、"ゴールデンロッド"、
"ゴーレンロッド"、"ゴストホワイト"、"グレー"、"グリーン"、"グリーンイエロー"、"ハニーデュー"、"ホットピンク"、"インディアンレッド" "、"イネン"、"アイボリー"、"カーキ"、"ラベンダー"、
"ラベンダーブラッシュ"、"ローングリーン"、"レモンシフォン"、"ライトブルー"、"ライトコーラル"、"ライトシアン"、"ライトゴーデンロッド"、"ライトゴーデンロッドイエロー" 、"ライトグレー"、
"ライトグリーン"、"ライトピンク"、"ライトサーモン"、"ライトシーグリーン"、"ライトスカイブルー"、"ライトスレートブルー"、"ライトスレートグレー"、"ライトスチールブルー"、"ライトイエロー"、
"ライム"、"ライムグリーン" ,"magenta","magenta","maroom","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurpul",
"mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise", 「ミディアムバイオレットレッド」、「ミッドナイトブルー」、「ミントクリーム」、
「ミスティローズ」、「モカシン」、「ナバホホワイト」、「ネイビー」、「ネイビーブルー」、「オールドレース」、「オリーブドラブ」、「オレンジ」、「オーキッド」、」オレンジ」、「パレゴデンロッド」、
「ペールグリーン」、「ペールターコイズ」、「パレビオレレッド」、「パパイヤホイップ」、「ピーチパフ」、「ペルー」、「ピンク」、「プラム」、「パウダーブルー」、「パープル」、「クォーツ」 "、"レッド"、
"ロージーブラウン"、"ロイヤルブルー"、"サドルブラウン"、"サーモン"、"サンディブラウン"、"スカーレット"、"シーグリーン"、"貝殻"、"シエナ"、"シルバー"、"スカイブルー" 、「スレートグレー」、
「スノー」、「スプリンググリーン」、「スティールブルー」、「タン」、「アザミ」、「トマト」、「ターコイズ」、「バイオレット」、「バイオレットレッド」、「ウィート」、「ホワイトスモーク」、 "黄","黄緑"};
for(int i=0;iif(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ",";
}
if(sResult.Length>0) //如果有一致项
sResult = sResult.Substring(0,sResult.Length-1); //去掉最後の“,”号
Response.Write(sResult);
%>
例 2、jQuery を使用して実装。 
クライアント：
 




jQuery は自動プロンプト テキスト ボックスを実装します<style> <li>font-family:Arial、Helvetica sans-serif; <li>font-size:12px; margin:5px; <li>form{padding:0px; margin:0px;} <li>/* ユーザー入力ボックスのスタイル */ <li>font -family :Arial、Helvetica、sans-serif; <li>font-size:12px; border:1px; <li>width:1px; margin:0px; <li>#popup{ <li>/* ブロック スタイル*/ <li>位置:絶対; 幅:202px; <li>フォントサイズ:12px; <li>左:25px; .show{ <li>/* プロンプト ボックスの境界線を表示します*/ <li>border:1px Solid #004a7e; <li>} <li>/* プロンプト ボックスのスタイル*/ <li>ul{ <li>list-style:none; ; パディング:0px; <li>color:#004a7e; <li>color:#FFFFFF; <li><スクリプト言語="javascript" src="jquery.min.js"> <li><script language="javascript"> //多くの関数が使用されることを考慮して <li>var oPopDiv;グローバル変数の形式を取る <li>var oColorsUl; <li>function initVars(){ <li>oInputField = $("#colors"); <li>oColorsUl = $(" # color_ul"); <li>} <li>function clearColors(){ <li>//プロンプトの内容をクリア <li>oColorsUl.empty(); <li>oPopDiv.removeClass("show"); <li>} <li>function setColors(the_colors){ <li>//プロンプト ボックスに渡されるパラメータは、一致した結果の配列です<li>clearColors(); //文字を入力するたびに、続行する前に元のプロンプトをクリアします<li>oPopDiv.addClass("show"); <li>for(var i =0) ;i<the_colors.length;i++) <li>//一致するプロンプト結果をユーザーに 1 つずつ表示します<li>oColorsUl.append($("<li>"+the_colors[i]+"</style>
oColorsUl.find("li").click(function(){
oInputField.val($(this).text());
clearColors();
}).hover(
function(){$ ( this).addClass("mouseOver");},
function(){$(this).removeClass("mouseOver");}
);
function findColors(){
initVars();
if(oInputField.val().length > 0){
//非同期データを取得
$.get("14-10.aspx",{sColor:oInputField.val()},
function(data) {
var aResult = new Array();
if(data.length > 0){
aResult = data.split(","); //サーバーの結果を表示します
} bbs.it-home .org
else
clearColors();
});
}
else
clearColors(); //入力がない場合 (たとえば、ユーザーが del キーを押した場合)
}
スクリプト>







 コードをコピーします


服务器端（14-10.aspx ）： 
 



Response.CacheControl = "キャッシュなし";
Response.AddHeader("プラグマ","キャッシュなし");
string sInput = Request["sColor"].Trim();
if(sInput.Length == 0)
return;
文字列 sResult = "";
string[] aColors = new string[]{"アリスブルー"、"アンティークウィズ"、"アクアマリン"、"アズール"、"ベージュ"、"ビスク"、"ブラック"、"ブランシュアーモンド"、"ブルー"、"ブルーバイオレット" 、「真鍮」、「ブロンズ」、
「ブラウン」、「バーリーウッド」、「カデットブルー」、「シャルトルーズ」、「チョコレート」、「銅」、「コーラル」、「コーンフラワーブルー」、「コーンシルク」、「シアン」、 "ダークブルー"、"ダークシアン"、
"ダークゴールデンロッド"、"ダークグレー"、"ダークグリーン"、"ダークカーキ"、"ダークマゼンタ"、"ダークライブグリーン"、"ダークオーキッド"、"ダークレンゲ"、"ダークレッド"、"ダークサーモン"、
 "darkseagreen"、"darkslateblue"、"darkslategray"、"darkturquoise"、"darkviolet"、"deeppink"、"deepskyblue"、"dimgray"、"dodgerblue"、
"feldspar"、"firebrick"、"floralwhite"、"フォレストグリーン"、"フクシア"、"ゲインズボロ"、"ゴールド"、"ゴールデンロッド"、"ゴーレンロッド"、"ゴストホワイト"、"グレー"、"グリーン"、
"グリーンイエロー"、"ハニーデュー"、"ホットピンク"、"インディアンレッド" "、"イネン"、"アイボリー"、"カーキ"、"ラベンダー"、"ラベンダーブラッシュ"、"ローングリーン"、"レモンシフォン"、
"ライトブルー"、"ライトコーラル"、"ライトシアン"、"ライトゴーデンロッド"、"ライトゴーデンロッドイエロー" 、"ライトグレー"、"ライトグリーン"、"ライトピンク"、"ライトサーモン"、
"ライトシーグリーン"、"ライトスカイブルー"、"ライトスレートブルー"、"ライトスレートグレー"、"ライトスチールブルー"、"ライトイエロー"、"ライム"、"ライムグリーン"、 "マゼンタ",
"マゼンタ","マルーム","マルーン","ミディアムアクアマリン","ミディアムブルー","ミディアムオーキッド","ミディアムパープル","ミディアムシーグリーン",
"ミディアムスレートブルー","ミディアムスプリンググリーン","ミディアムターコイズ", "mediumvioletred"、"midnightblue"、"mintcream"、"mistyrose"、
"モカシン"、"ナバホホワイト"、"ネイビー"、"ネイビーブルー"、"オールドレース"、"オリーブドラブ"、"オレンジ"、"オーキッド"、"オレンジ」、「パレゴデンロッド」、「ペールグリーン」、
「ペールターコイズ」、「パレビオレレッド」、「パパイヤホイップ」、「ピーチパフ」、「ペルー」、「ピンク」、「プラム」、「パウダーブルー」、「パープル」、「クォーツ」 "、"レッド"、"ロージーブラウン"、
"ロイヤルブルー"、"サドルブラウン"、"サーモン"、"サンディブラウン"、"スカーレット"、"シーグリーン"、"貝殻"、"シエナ"、"シルバー"、"スカイブルー" 、「スレートグレー」、「スノー」、
「スプリンググリーン」、「スチールブルー」、「タン」、「アザミ」、「トマト」、「ターコイズ」、「バイオレット」、「バイオレットレッド」、「ウィート」、「ホワイトスモーク」、 "黄","黄緑"};
for(int i=0;iif(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ",";
}
if(sResult.Length>0) //如果有一致项
sResult = sResult.Substring(0,sResult.Length-1); //去掉最後の“,”号
Response.Write(sResult);
%>