var xmlHttp, title; var serch; var results, resultsTable, resultsBody; var num; document.onclick = pageClick; function pageClick() { //화면 클릭 시, 자동완성 창이 떠 있다면 닫는다. if (results && results.style.display != "none") results.style.display = "none"; } /* CreateXMLHttpRequest() ajax개념의 객체를 생성한다. 브라우저의 호환성을 위해서 microsoft의 Internet Explorer와 그 외의 브라우저(모질라, ...)로 나누어진다.*/ function createXMLHttpRequest() { if (window.ActiveXObject) { /* Internet Explorer 브라우저일 때 ajax 객체 생성 */ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { /* 그 외의 브라우저 일 때 ajax 객체 생성 */ xmlHttp = new XMLHttpRequest(); } } /* init() html의 엘리먼트들을 domScript 문법으로 객체화. */ function init() { serch = document.getElementById("str_search_word"); /* text 엘리먼트 */ results = document.getElementById("results"); /* div 엘리먼트 */ } /* handleStateChange() ajax 객체를 담은 xmlHttp가 잘 접속되었는지 확인한다. 접속 후 결과는 xmlHttp에 담긴다. */ function handleStateChange() { if (xmlHttp.readyState == 4) { /* 접속이 양호한지 확인. */ if (xmlHttp.status == 200) { /* 결과가 양호한지 확인. */ var str = xmlHttp.responseText; /* 서버측 페이지에서 출력한 문서들을 text 형식으로 받아와 str에 담는다. */ title = str.split("/"); /* str에 담긴 문자열을 '/'를 기준으로 배열화 하여 title에 담는다. */ title.pop(); /* 마지막에 담긴 배열을 삭제한다. */ clear(); /* 이전에 검색된 결과들 삭제한다. */ setSerch(); /* 검색된 결과물을 출력한다. */ } } } /* startRequest() 서버측에 연결한다. */ function startRequest() { init(); /* 엘리먼트들을 초기화 한다. */ if (serch.value.length > 0) { /* serch(text)객체의 값이 있으면 */ if (event.keyCode == 40) { /* 키보드의 눌린 값이 ↓ 이면 */ results.childNodes[0].focus(); /* results의 자식들 중에 첫번째(배열0)에 focus를 맞춘다. */ return; } createXMLHttpRequest(); /* ajax 객체를 생성하여 xmlHttp에 담는다. */ xmlHttp.onreadystatechange = handleStateChange; /* 증요한 부분인데 문법이 좀 특이해서 이해를 못 하겠다. handleStateChange는 함수이지만 ()를 사용하지 않고 사용한다는 점과 onreadystatechange가 어떤 결과를 담는 것인지 모르겠다.*/ url = "/KO/Common/serch.asp?serch=" + serch.value; /* 서버측 페이지를 호출하기 위해 문자열을 생성한다.(QueryString) */ xmlHttp.open("GET", url, true); /* 연결방식, 주소, 동기화/비동기화를 뜻한다. false는 동기화 true는 비동기화이다. 동기화는 화면을 갱신(f5 비슷한거)해주는 것이기 때문에 ajax의 본래 의미와는 맞지 않다고 생각한다. 서버측 페이지와 연결한다. */ xmlHttp.send(null); /* QueryString일 때는 값을 담지 않는다. post방식 일 경우에는 값을 담으나 정확히 어떤 값인지 아직 모르겠다. */ } else { clear(); /* serch(text) 객체의 값이 없으며 검색결과를 초기화한다. */ } } /* setSertch() 검색된 결과를 출력한다. */ function setSerch() { for (i = 0; i < title.length; i++) { /* 배열로 만들었던 title의 배열갯수만큼 반복한다. */ var div = document.createElement("div"); /* div엘리먼트를 객체로 생성하여 div에 담는다. */ div.id = i; /* div의 id값 설정. */ //div.style.height = '10px'; /* div의 style 중 height 값을 설정한다. */ div.style.width = '202px'; /* style height */ div.style.border = 'solid 0px gray'; 1 /* border */ div.onfocus = function() { focusDiv(this); } /* div에 focus가 맞춰진다면 focusDiv() 함수를 호출한다. */ div.onblur = function() { blurDiv(this); } /* div에 blur가 맞춰진다면 blurDiv() 함수를 호출한다. */ div.onkeyup = function() { keyUpDiv(results.childNodes); } /* div에 key가 눌린다면 keyUpDiv함수를 호출하며 인자값으로 results의 자식들을 배열로 넘긴다. */ div.appendChild(document.createTextNode(title[i])); /* div에 자식들로 title[i]를 넣는다. */ results.appendChild(div); /* results의 자식으로 div를 넣는다. */ } results.style.display = "block"; results.style.backgroundColor = "white"; results.style.height = "210px"; results.style.overflow = "scroll"; //overflow results.style.width = "140px"; results.style.overflow = "auto"; //overflow results.style.textAlign = "left"; } /* focusDiv( div ) div에 focus가 맞춰질 경우 serch의 값을 자신의 값으로 채우고 background의 값과 글자 색을 변경하며 자식의 id값을 num에게 넘긴다. */ function focusDiv(div) { serch.value = div.firstChild.nodeValue; /* serch의 값을 자신의 값으로 채운다. */ div.style.background = 'gray'; /* background의 값을 gray로 변경한다. */ div.style.color = 'white'; /* color의 값을 white로 변경한다. */ num = parseInt(div.id); /* div.id의 값을 숫자형으로 변경후 num에 넣는다. */ } /* blurDiv( div ) */ function blurDiv(div) { div.style.background = 'white'; div.style.color = 'black'; } /* keyUpDiv( div ) 키가 눌릴 경우 focus를 변경한다. */ function keyUpDiv(div) { if (event.keyCode == 38 && num != 0) { /* num이 0이 아니고 위 방향키를 누르면 */ div[num - 1].focus(); /* focus가 위로 올라간다. */ } else if (event.keyCode == 40 && num != title.length - 1) { /* num이 title의 배열수 -1 과 같지 않으면 */ div[num + 1].focus(); /* focus가 아래로 내려간다. */ } else if (event.keyCode == 13) { /* 엔터이면 레이어를 닫는다 */ clear(); } } /* clear() results의 자식들을 삭제한다. */ function clear() { for (i = results.childNodes.length - 1; i >= 0; i--) /* results의 자식수-1의 값을 i에 넣어 i가 0이 될때까지 반복 */ results.removeChild(results.childNodes[i]); /* results의 자식을 삭제한다. */ }