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, sans-serif;
글꼴 크기:12px; 여백:5px;
}
양식{패딩:0px; 여백:0px;}
입력{
/* 사용자 입력 상자 스타일 */
글꼴 모음:Arial, Helvetica, sans-serif;
글꼴 크기:12px; 테두리:1px 솔리드 #000000;
너비:200px; 여백:0px;
}
#팝업{
/* 프롬프트 상자 div 블록의 스타일 */
위치:절대 너비:202px;
색상:#004a7e; 글꼴 크기:12px;
글꼴 모음:Arial, Helvetica, sans-serif;
왼쪽:41px; 위쪽:25px;
}
#팝업.쇼{
/* 프롬프트 상자의 테두리를 표시합니다 */
테두리:1px 솔리드 #004a7e;
}
#popup.hide{
/* 프롬프트 상자의 테두리 숨기기*/
테두리:없음;
}
/* 프롬프트 상자 스타일*/
ul{
목록 스타일:없음;
여백:0px;
}
li.mouseOver{
배경색:#004a7e;
색상:#FFFFFF;
}
li.mouseOut{
배경색:#FFFFFF;
색상:#004a7e;
}
-->
</style>
<스크립트 언어=자바스크립트>
var oInputField; //많은 함수에서 사용된다는 점을 고려하여
var oPopDiv; //전역변수 형태입니다.
var oColorsUl;
var xmlHttp;
함수 createXMLHttpRequest(){
if(window.ActiveXObject)
xmlHttp = 새 ActiveXObject(Microsoft.XMLHTTP);
그렇지 않은 경우(window.XMLHttpRequest)
xmlHttp = 새로운 XMLHttpRequest();
}
함수 initVars(){
//변수 초기화
oInputField = document.forms[myForm1].colors;
oPopDiv = document.getElementById(popup);
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++){
//일치하는 프롬프트 결과를 사용자에게 하나씩 표시합니다.
oLi = document.createElement(li);
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi.onmouseover = 함수(){
this.className = mouseOver; //마우스가 지나갈 때 강조 표시
}
oLi.onmouseout = 함수(){
this.className = mouseOut; //탈퇴 시 원래 상태로 복원
}
oLi.onclick = 함수(){
//사용자가 일치하는 항목을 클릭하면 입력 상자에 해당 항목의 값을 설정합니다.
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 = 함수(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var aResult = new Array();
if(xmlHttp.responseText.length){
aResult = xmlHttp.responseText.split(,);
setColors(aResult); //서버 결과 표시
}
또 다른
클리어컬러스();
}
}
xmlHttp.send(null);
}
또 다른
clearColors(); //입력이 없을 때 프롬프트 상자를 지웁니다(예: 사용자가 del 키를 누름).
}
</script>
</head>
<본문>
<양식 방법=게시물 이름=myForm1>
색상: <입력 유형=텍스트 이름=색상 id=색상 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(Pragma,no-cache);
string sInput = Request[sColor].Trim();
if(sInput.Length == 0)
반품;
문자열 sResult = ;
string[] aColors = 신규 문자열[]{aliceblue,antiquewith,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,blueviolet,brass,bronze,brown,burlywood,cadetblue,chartreuse,chocolate,copper,coral,cornfloewrb lue,옥수수 실크,청록색,darkblue,dark시안,darkgoldenrod,darkgray,darkgreen,darkkhaki,darkmagenta,darkolivegreen,darkorchid,darkorenge,darkred,darksalmon,darkseagreen,darkslateblue,darkslate grey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dodgerblue,feldspar,firebrick,floralwhite,forestgreen,fuchsia,gainsboro,gold,goldenrod,golenrod,gostwhite,gray,green,greeny 엘로우,허니듀,핫핑크,인디언레드,이넨,아이보리,카키,라벤더,라벤더블러쉬,잔디그린,레몬쉬폰,라이트블루,라이트코랄,라이트시안,라이트고덴로드,라이트고덴로드,라이트고덴로드옐로우,라이트그레이,라이트그린,l ightpink,lightsalmon,lightseagreen,lightskyblue,lightslateblue,lightslategray,lightsteelblue,lightyellow,lime,limegreen,magenta,magenta,maroom,maroon,mediumaquamarine,mediumblue,medi umorchid,mediumpurpul,mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,mintcream,mistyrose,moccasin,navajowhite,navy,navyblue,oldlace,oli vedrab,orange,orchid,orengered,palegodenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,페루,핑크,plum,powderblue,purple,quartz,red,rosybrown,royalblue,saddlebrown,sal 월,샌디브라운,스칼렛,씨그린,조개,시에나,실버,스카이블루,슬레이트그레이,스노우,스프링그린,스틸블루,황갈색,엉겅퀴,토마토,터콰이즈,바이올렛,바이올렛레드,밀,화이트스모크,옐로우,옐로우그린};
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, sans-serif;
글꼴 크기:12px; 여백:5px;
}
양식{패딩:0px; 여백:0px;}
입력{
/* 사용자 입력 상자 스타일 */
글꼴 모음:Arial, Helvetica, sans-serif;
글꼴 크기:12px; 테두리:1px 솔리드 #000000;
너비:200px; 여백:0px;
}
#팝업{
/* 프롬프트 상자 div 블록의 스타일 */
위치:절대 너비:202px;
색상:#004a7e; 글꼴 크기:12px;
글꼴 모음:Arial, Helvetica, sans-serif;
왼쪽:41px; 위쪽:25px;
}
#팝업.쇼{
/* 프롬프트 상자의 테두리를 표시합니다 */
테두리:1px 솔리드 #004a7e;
}
/* 프롬프트 상자 스타일*/
ul{
목록 스타일:없음;
여백:0px;
색상:#004a7e;
}
li.mouseOver{
배경색:#004a7e;
색상:#FFFFFF;
}
-->
</style>
<script 언어=javascript src=jquery.min.js></script>
<스크립트 언어=자바스크립트>
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++)
//일치하는 프롬프트 결과를 사용자에게 하나씩 표시합니다.
oColorsUl.append($(<li>+the_colors[i]+</li>));
oColorsUl.find(li).click(function(){
oInputField.val($(this).text());
클리어컬러스();
}).hover(
함수(){$(this).addClass(mouseOver);},
function(){$(this).removeClass(mouseOver);}
);
}
함수 findColors(){
initVars(); //변수 초기화
if(oInputField.val().length > 0){
//비동기 데이터 가져오기
$.get(14-10.aspx,{sColor:oInputField.val()},
함수(데이터){
var aResult = new Array();
if(데이터.길이 > 0){
aResult = data.split(,);
setColors(aResult); //서버 결과 표시
}
또 다른
클리어컬러();
});
}
또 다른
clearColors(); //입력이 없을 때 프롬프트 상자를 지웁니다(예: 사용자가 del 키를 누름).
}
</script>
</head>
<본문>
<양식 방법=게시물 이름=myForm1>
색상: <입력 유형=텍스트 이름=색상 id=색상 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(Pragma,no-cache);
string sInput = Request[sColor].Trim();
if(sInput.Length == 0)
반품;
문자열 sResult = ;
string[] aColors = 신규 문자열[]{aliceblue,antiquewith,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,blueviolet,brass,bronze,brown,burlywood,cadetblue,chartreuse,chocolate,copper,coral,cornfloewrb lue,옥수수 실크,청록색,darkblue,dark시안,darkgoldenrod,darkgray,darkgreen,darkkhaki,darkmagenta,darkolivegreen,darkorchid,darkorenge,darkred,darksalmon,darkseagreen,darkslateblue,darkslate grey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dodgerblue,feldspar,firebrick,floralwhite,forestgreen,fuchsia,gainsboro,gold,goldenrod,golenrod,gostwhite,gray,green,greeny 엘로우,허니듀,핫핑크,인디언레드,이넨,아이보리,카키,라벤더,라벤더블러쉬,잔디그린,레몬쉬폰,라이트블루,라이트코랄,라이트시안,라이트고덴로드,라이트고덴로드,라이트고덴로드옐로우,라이트그레이,라이트그린,l ightpink,lightsalmon,lightseagreen,lightskyblue,lightslateblue,lightslategray,lightsteelblue,lightyellow,lime,limegreen,magenta,magenta,maroom,maroon,mediumaquamarine,mediumblue,medi umorchid,mediumpurpul,mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,mintcream,mistyrose,moccasin,navajowhite,navy,navyblue,oldlace,oli vedrab,orange,orchid,orengered,palegodenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,페루,핑크,plum,powderblue,purple,quartz,red,rosybrown,royalblue,saddlebrown,sal 월,샌디브라운,스칼렛,씨그린,조개,시에나,실버,스카이블루,슬레이트그레이,스노우,스프링그린,스틸블루,황갈색,엉겅퀴,토마토,터콰이즈,바이올렛,바이올렛레드,밀,화이트스모크,옐로우,옐로우그린};
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);
%>