두 가지 자동 프롬프트 텍스트 상자 효과를 위한 js 구현 코드를 공유하세요.
예제 1, AJAX 구현을 직접 작성합니다.
고객:
-
-
-
-
- 자동 Promping_bbs.it-home.org< ;/title>을 위한 Ajax 텍스트 상자 ;
- script Language="javascript"> var oInputField; //많은 함수를 사용한다는 점을 고려하여
- var oPopDiv; //그래서 전역변수 형식을 사용합니다.
- var oColorsUl; 🎜>function createXMLHttpRequest(){
- if(window.ActiveXObject)
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
- else if(window.XMLHttpRequest)
- xmlHttp = new XMLHttpRequest() ;
- }
- function initVars(){
- //변수 초기화
- oInputField = document.forms["myForm1"].colors
- oPopDiv = document.getElementById("popup");
- oColorsUl = document.getElementById("colors_ul");
- }
- functionclearColors(){
- //프롬프트 내용 지우기
- for(var i=oColorsUl.childNodes.length-1 ; i>=0;i--)
- oColorsUl.removeChild(oColorsUl.childNodes[i]);
- oPopDiv.className = "hide";
- }
- function setColors(the_colors) 🎜 >//프롬프트 상자를 표시하고 전달된 매개변수는 일치하는 결과의 배열입니다.
- clearColors(); //문자를 입력할 때마다 계속하기 전에 원래 프롬프트를 지웁니다.
- oPopDiv.className = " show";
- var oLi;
- for(var i=0;i//일치하는 프롬프트 결과를 하나씩 사용자에게 표시
- 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() ; //프롬프트 상자 지우기
- }
- }
- }
- 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(",");
- setColors(aResult); //서버 결과 표시
- } bbs.it-home.org
- else
- clearColors();
- }
- xmlHttp.send( null);
- }
- else
- clearColors(); //입력이 없을 때 프롬프트 상자 지우기(예: 사용자가 del 키를 누름)
- }
- script>
-
-
-
-
- < ;/body>
-
-
- 코드 복사
-
-
服务器端(9-10.aspx ):
-
- <%@ 페이지 언어="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
- <%@ Import Namespace="System.Data" %>
- <%
- Response.CacheControl = "캐시 없음";
- Response.AddHeader("Pragma","no-cache");
- string sInput = Request["sColor"].Trim();
- if(sInput.Length == 0)
- return;
- 문자열 sResult = "";
- string[] aColors = new string[]{"aliceblue","antiquewith","aquamarine","azure","beige","bisque","black","blanchedalmond","blue"," blueviolet","brass",
- "bronze","brown","burlywood","cadetblue","chartreuse","chocolate","copper","coral","cornfloewrblue","cornsilk", "시안색",
- "darkblue","dark시안색","darkgoldenrod","darkgray","darkgreen","darkkhaki","darkmagenta","darkolivegreen","darkorchid",
- "darkorchid", "darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink",
- "deepskyblue","dimgray","dodgerblue","feldspar" ,"firebrick","floralwhite","forestgreen","fuchsia","gainsboro","gold","goldenrod",
- "golenrod","gostwhite","gray","green","greenyellow ","honeydew","hotpink","indianred","inen","ivory","khaki","lavender",
- "lavenderblush","lawngreen","lemonchiffon","lightblue"," lightcoral","light시안","lightgodenrod","lightgodenrodyellow","lightgray",
- "lightgreen","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslateblue","lightslategray", "lightsteelblue","lightyellow",
- "lime","limegreen","magenta","magenta","maroom","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurpul" ,
- "mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream",
- "mistyrose","moccasin","navajowhite","navy" ,"navyblue","oldlace","olivedrab","orange","orchid","orengered","palegodenrod",
- "palegreen","paleturquoise","palevioletred","papayawhip","peachpuff ","페루","핑크","자두","파우더블루","보라색","석영","빨간색",
- "rosybrown","royalblue","saddlebrown","salmon"," sandybrown","scarlet","seagreen","seashell","sienna","silver","skyblue","slategray",
- "snow","springgreen","steelblue","tan", "엉겅퀴","토마토","청록색","보라색","보라색","밀","흰 연기","노란색","노란색 녹색"};
- 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를 사용하여 구현.
고객:
-
-
-
- 코드 복사
-
-
服务器端(14-10.aspx ):
-
- <%@ 페이지 언어="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
- <%@ Import Namespace="System.Data" %>
- <%
- Response.CacheControl = "캐시 없음";
- Response.AddHeader("Pragma","no-cache");
- string sInput = Request["sColor"].Trim();
- if(sInput.Length == 0)
- return;
- 문자열 sResult = "";
- string[] aColors = new string[]{"aliceblue","antiquewith","aquamarine","azure","beige","bisque","black","blanchedalmond","blue"," blueviolet","brass","bronze",
- "brown","burlywood","cadetblue","chartreuse","chocolate","copper","coral","cornfloewrblue","cornsilk", "청록색","darkblue","dark시안색",
- "darkgoldenrod","darkgray","darkgreen","darkkhaki","darkmagenta","darkolivegreen","darkorchid","darkorchid","darkornge","darkred" ,"darksalmon",
- "darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dodgerblue",
- "feldspar" ,"firebrick","floralwhite","forestgreen","fuchsia","gainsboro","gold","goldenrod","golenrod","gostwhite","gray","green",
- "greenyellow ","honeydew","hotpink","indianred","inen","ivory","khaki","lavender","lavenderblush","lawngreen","lemonchiffon",
- "lightblue"," lightcoral","light시안","lightgodenrod","lightgodenrodyellow","lightgray","lightgreen","lightpink","lightsalmon",
- "lightseagreen","lightskyblue","lightslateblue","lightslategray", "lightsteelblue","lightyellow","lime","limegreen","magenta",
- "magenta","maroom","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurpul" ,"mediumseagreen",
- "mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose",
- "moccasin","navajowhite","navy" ,"navyblue","oldlace","olivedrab","orange","orchid","orengered","palegodenrod","palegreen",
- "paleturquoise","palevioletred","papayawhip","peachpuff ","페루","핑크","자두","파우더블루","보라색","석영","빨간색","rosybrown",
- "royalblue","saddlebrown","연어"," sandybrown","scarlet","seagreen","seashell","sienna","silver","skyblue","slategray","snow",
- "springgreen","steelblue","tan", "엉겅퀴","토마토","청록색","보라색","보라색","밀","흰 연기","노란색","노란색 녹색"};
- 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);
- %>
复代代码
|