자동완성 기능을 구현해 보았습니다.
Controller로 Struts2를 사용하였으니 관련된 부분은 제가 Struts란에 올린 게시물을 확인하시기 바랍니다.
/**************************************************************
ajax.js
**************************************************************/
var AutoComplete = {
xmlHttp : null,
/*
* XMLHttp객체생성
*/
getXMLHttpRequest: function() {
//인터넷 익스플로러일 경우
if(window.ActiveXObject){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e1){
return null;
}
}
}
//다른 브라우저일 경우
else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
//브라우저 식별 실패
else{
return null;
}
},
/*
* XMLHttp Request를 서버로
*/
ContentLoader: function(url, execFunction) {
xmlHttp = this.getXMLHttpRequest();
xmlHttp.onreadystatechange = execFunction;
xmlHttp.open("POST", url, true); // url의 주소를 GET방식으로 열 준비를 한다.
xmlHttp.send(); //서버에 전송한다.
},
/*
* XMLHttp Response가 서버로 부터 온전한 상태로 왔는지 확인
*/
getState: function() {
if(xmlHttp.readyState == 4){ //데이터의 전부를 받은 상태
if(xmlHttp.status == 200){//요청 성공
return true;
}else{
return false;
}
}
}
}
/**************************************************************
AutoComplete.jsp
**************************************************************/
<%@ page contentType="text/html; charset=EUC-KR"%>
<html>
<head>
<title>autoComplete</title>
<script type="text/javascript" src="/common/ajax.js"></script>
<script>
var div;
var table;
var text;
/*
* 변수값 초기화
*/
function onLoad(){
div = document.getElementById("autoCompleteDiv");
table = document.getElementById("autoCompleteTable");
text = document.getElementById("autoCompleteText");
}
/*
* 조회
*/
function listAutoComplete(){
if(text.value != ""){
if(event.keyCode != 229){
var url = "/ajax/autoComplete.action?word=" + text.value;
AutoComplete.ContentLoader(url, viewTitleList);
}
}else{
clearTitleList();
}
}
/*
* 테이블을 DHTML로 작성
*/
function viewTitleList(){
clearTitleList();
if(AutoComplete.getState()){ //데이터의 전부를 받은 상태
var tr, td;
var words = xmlHttp.responseXML.getElementsByTagName("word");
var size = words.length;
for(var i = 0 ; i < size ; i++){
tr = table.insertRow();
tr.style.width = "100%";
td = tr.insertCell();
td.style.width = "100%";
td.style.cursor = "hand";
td.innerText = words[i].firstChild.nodeValue;
td.onclick = function() { wordClick(this);};
td.onmouseover = function() { mouseOver(this);};
td.onmouseout = function() { mouseout(this);};
}
}
}
/*
* 테이블의 목록을 초기화
*/
function clearTitleList(){
var ind = table.rows.length;
for (var i = ind - 1; i >= 0 ; i--) {
table.deleteRow(i);
}
}
/*
* 클릭시
*/
function wordClick(oTd){
text.value = oTd.innerText;
}
/*
* 마우스오버
*/
function mouseOver(td){
td.style.background= "#CBE7BA";
}
/*
* 마우스아웃
*/
function mouseout(td){
td.style.background= "#FFFFFF";
}
</script>
</head>
<body onLoad="onLoad()">
<input type="text" id="autoCompleteText" style="width:200px" autocomplete="off" onkeyup="javascript:listAutoComplete()"><br>
<div id="autoCompleteDiv" style="position:absolute; width:200px; height:180px; scrolling:yes; overflow-y:auto;">
<table id="autoCompleteTable" style="width:100%"></table>
</div>
</body>
</html>
댓글 없음:
댓글 쓰기