|
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 キーを押します)
-
-
| 