10분만에 AutoComplete 자동완성 효과코드 생성_javascript 스킬

.클리셰--- ;
function createXmlHttpRequest()
{

if(window.ActiveXObject) { xmlHttp=new ActieveXObject("Microsoft.XMLHTTP") } 🎜>else if( window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest() }

}

Jquery를 사용하여 javascript를 작성하지 않는 경우 위의 내용을 XmlHttpRequest 개체 풀로 직접 변경해야 합니다. 더 이상 작성하지 않겠습니다.
. 자동 완성 기능 실행
코드




코드 복사


코드는 다음과 같습니다.

function $E(인수)
{
return document.getElementById(argument);
}

function GetInfo(e) { var input=$E ("Text1 ").value; if(input.length<=0) { changeDisplay()

}

else
{
createXmlHttpRequest();
var 키워드=e.value;

xmlHttp.onreadystatechange=readyStateChangeHandle;
var url="AutoComplete.ashx?keyword=" 키워드 "&timeStamp=" new Date().getTime();
xmlHttp.open("GET",url,true)
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8')
xmlHttp.send(null);
}
}


여기서 서버 배경은 물론 클라이언트의 요청에 응답하는 .NET 플랫폼의 일반 핸들러입니다. , webservicee, aspx.cs 또는 WCF를 사용하여 클라이언트 요청에 응답할 수도 있지만 웹 서비스 응답 클라이언트는 SOAP 프로토콜을 따라야 한다는 점에 유의해야 합니다. 물론 웹 서비스가 응답할 수 있도록 구성 파일을 수정할 수도 있습니다. 요청을 받거나 게시하는 경우), xxx.ashx 및 aspx.cs 클라이언트에 응답하려면 http 프로토콜을 따라야 합니다. 물론 백엔드는 PHP 또는 JAVA일 수도 있습니다.
. 마우스 이동 색상 변경



코드 복사


코드는 다음과 같습니다.


함수 Changecolor(이벤트)

{

event.style.Background="#00FFFF";

} 함수 Changebackcolor(이벤트) { event.style .Background=" #FFFFFF" }

. 선택 항목 숨기기 및 표시
코드




코드 복사


코드는 다음과 같습니다:

function ChangeDivDisplay(e)
{
document.getElementById("Text1").value=e.firstChild. 데이터;
var html ="";
document.getElementById("searchResult").innerHTML=html;

document.getElementById("searchResult").style.visibility="hidden"; } 함수changeDisplay() { var html=""; document.getElementById("searchResult").innerHTML=html document.getElementById("searchResult" ).style.visibility="hidden";

}

.콜백 함수
코드




코드 복사


코드는 다음과 같습니다.


function ReadyStateChangeHandle()
{

if(xmlHttp.readyState==4)
{
if(xmlHttp. status==200)
{

if(xmlHttp.responseText!="]") { var resultDiv=$E("searchResult") var josnStr=eval('(' xmlHttp.responseText ')'); var html="";

for (josnStr의 var 키)
{

html = "" josnStr[key].bookCount "이 책 ;/span>";

}
html = "닫기"

resultDiv.innerHTML=html
document.getElementById("searchResult") .style.visibility=" visible";
}
else
{
changeDisplay()
}
}
}
}


여기에서는 json을 사용합니다. 물론 XML이나 문자열을 사용할 수도 있습니다.