suggest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/httpRequest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
var check = false;
var lastKey = "";
var loopKey = false;
function searchKey(){
if(check == false){
setTimeout("sendKey()", 500); // 주어진 시간을 기다렸다가
// 단 한번 지정된 함수를 호출하는 기능 !! sleep과 같다.
loopKey = true;
}
check = true;
}
function sendKey(){
if(loopKey == true){
// 현재 문서의 word라는 id를 가진 객체의 value를 가져온다.
var keyword = document.getElementById("word").value;
if(keyword == ""){ // backspace키로 인해 지울때를 생각한 코드
lastKey = "";
document.getElementById("suggest").style.display="none";
}else if(keyword != lastKey){
// 앞서 찾은 단어(lastKey)와 다를 경우에...
lastKey = keyword;
if(keyword != ""){
var param = "keyword="+escape(encodeURIComponent(keyword));
sendProcess("suggest.jsp", param, view, "POST");
}else{
document.getElementById("suggest").style.display="none";
}
}
}else
return; // setTimeout에 의해 재귀호출을 멈추게 한다. (무한루프 탈출)
setTimeout("sendKey()", 500);
}
function view(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var tt = document.getElementById("suggest");
tt.innerHTML = xhr.responseText;
tt.style.display = "block";
}else
document.getElementById("suggest").style.display="none";
}
}
function selectItem(str){
document.getElementById("word").value = str;
loopKey = false;
check = false;
document.getElementById("suggest").style.display="none";
}
</script>
</head>
<body>
<input type="text" id="word" onkeydown="searchKey()"/>
<input type="button" value="검색"/>
<div style="border:1 solid #ababab; background-color:#f4fff4;width:193px;display:none" id="suggest"></div>
</body>
</html>
suggest.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@page import="java.net.URLDecoder"%>
<jsp:useBean id="sug" class="suggest.Suggest" scope="session"/>
<%
String key = URLDecoder.decode(request.getParameter("keyword"), "UTF-8");
String[] msg = sug.getSuggest(key);
if(msg != null){
%>
<table width="100%">
<%
for(int i = 0; i<msg.length; i++){
String str = msg[i];
%>
<tr id="tt1" style="cursor:hand" onMouseOver="this.style.background='lightsteelblue'"
onMouseOut="this.style.background='f4fff4'">
<td width="100%">
<a href="javascript
<%=str %>
</a>
</td>
</tr>
<%
} // end for
%>
</table>
<%
}
%>
suggest.xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
<keyword>Test입니다.</keyword>
<keyword>Ajax sample</keyword>
<keyword>Hanbit</keyword>
<keyword>test</keyword>
<keyword>so hot</keyword>
<keyword>원더걸스</keyword>
<keyword>핸콕</keyword>
<keyword>원더우먼</keyword>
<keyword>테스트</keyword>
<keyword>크로싱</keyword>
<keyword>크로마뇽</keyword>
<keyword>테트리스</keyword>
<keyword>absolute</keyword>
</root>
httpRequest.js
var xhr = null;
function createRequest(){
if(window.ActiveXObject)
xhr = new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest)
xhr = new XMLHttpRequest();
}
function sendProcess(url, param, callback, method){
createRequest();
var httpMethod = (method=="POST")?method:"GET";
if(httpMethod != "GET" && httpMethod != "POST")
httpMethod = "GET";
var httpParam = (param == null || param == "")?null:param
var httpURL = url;
if(httpMethod == "GET" && httpParam != null)
httpURL = httpURL + "?" + httpParam
//alert(httpMethod);
//alert(httpURL);
//alert(httpParam);
xhr.open(httpMethod, httpURL, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = callback;
xhr.send(httpMethod == "GET"?null:httpParam);
}
'Programing > Ajax' 카테고리의 다른 글
| Ajax - DWR (0) | 2008.07.29 |
|---|---|
| AJAX - Open API 기능 사용 책검색 / 지도 찾기 (0) | 2008.07.29 |
| Ajax - DB 값 빼오기 (0) | 2008.07.29 |
| Ajax - innerHTML (0) | 2008.07.29 |
| Ajax - innerHTML (0) | 2008.07.29 |
