최신글
hyeonga_code
Ajax_innerHTML_종합 예제_제시어 기능 구현 본문
반응형
-- 종합 예제
- 입력한 검색어를 서버에 전송합니다.
- 전달 받은 검색어를 활용하여 제시어 목록을 추출합니다.
- 제시어를 지정한 양식으로 클라이언트에 전송합니다.
- 응답 텍스트를 분석하여 제시어 목록을 화면에 출력합니다.
- webapp > ch02 > 'suggest.jsp' jsp 파일을 생성합니다.
=====
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<%@ page language="java" contentType="text/plain; charset=UTF-8"%>
<%@ page import="java.util.List"%>
<%!String[] keywords = { "안녕하세요",
"안녕하세요 반갑습니다.",
"안녕 하세요",
"안녕 하세요 반갑습니다.",
"안 녕하세요",
"안녕하 세요",
"반갑습니다." };
// 검색 함수를 정의합니다.
public List<String> search(String keyword) {
// 검색 내용이 없는 경우 출력하지 않습니다.
if (keyword == null || keyword.equals(""))
return java.util.Collections.emptyList();
// 검색어를 대문자로 변환합니다.
keyword = keyword.toUpperCase();
// 결과 리스트를 생성합니다.
List<String> result = new java.util.ArrayList<String>(8);
for (int i = 0; i < keywords.length; i++) {
if (((String) keywords[i]).startsWith(keyword)) {
result.add(keywords[i]);
}
}
return result;
}%>
<%
// 요청된 값을 인코딩하는 방식을 지정합니다.
request.setCharacterEncoding("utf-8");
// 클라이언트가 입력한 값을 저장합니다.
String keyword = request.getParameter("keyword");
// search 함수를 수행한 결과를 리스트에 저장합니다.
List<String> keywordList = search(keyword);
// 리스트의 크기를 출력합니다.
out.print(keywordList.size());
out.print(" | ");
// 리스트의 값을 모두 출력합니다.
for (int i = 0; i < keywordList.size(); i++) {
String key = (String) keywordList.get(i);
out.print(key);
if (i < keywordList.size() - 1) {
out.print(", ");
}
}
%>
|
- 값을 입력하는 클라이언트의 기능을 구현합니다.
- ch02 > 'suggestclient.html' html 파일을 생성합니다.
=====
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서제스트</title>
<!-- httpRequest.js 파일을 포함하고 있습니다.
- XMLHttpRequest 객체를 생성합니다.
- Ajax 요청을 보내는 함수가 있습니다. -->
<script type="text/javascript" src="httpRequest.js"></script>
<script type="text/javascript">
// 자동 완성 기능을 제어하고 마지막 검색어를 추적하는 변수입니다.
var checkFirst = false;
var lastKeyword = '';
var loopSendKeyword = false;
// 검색어 입력란에 입력이 시작될 때 호출하는 함수로 자동 완성을 시작합니다.
function startSuggest() {
if (checkFirst == false) {
// 0.5초마다 호출합니다.
setTimeout("sendKeyword();", 500);
loopSendKeyword = true;
}
// 다음으로 넘어갑니다.
checkFirst = true;
}
// 검색어를 서버로 전송하는 함수로 검색어가 변경되거나 입력이 발생하는 경우 호출됩니다.
function sendKeyword() {
if (loopSendKeyword == false)
return;
var keyword = document.search.keyword.value;
// 검색어가 없는 경우
if (keyword == '') {
// 빈 문자열로 초기화합니다.
lastKeyword = '';
// 자동 완성 결과를 감춥니다.
hide('suggest');
// 검색어가 있는 경우
} else if (keyword != lastKeyword) {
// 현재 검색어를 저장합니다.
lastKeyword = keyword;
// 검색어가 있는 경우
if (keyword != '') {
// 검색어를 uri 인코딩을 진행하여 쿼리 문자열로 저장합니다.
// 저장된 문자열은 서버로 전송될 자동 완성 검색 요청의 파라미터롤 사용됩니다.
var params = "keyword=" + encodeURIComponent(keyword);
// post 방식으로 suggest.jsp 파일로 이동하며 displayReault()메소드를 호출합니다.
sendRequest("suggest.jsp", params, displayResult, 'POST');
} else {
// 검색어가 없는 경우 결과를 감춥니다.
hide('suggest');
}
}
// 함수를 0.5초마다 실행하도록 설정합니다.
setTimeout("sendKeyword();", 500);
}
// Ajax 요청 결과를 처리하는 함수로 서버로부터의 응답을 파싱하여 자동 완성 결과를 화면에 출력합니다.
function displayResult() {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
var resultText = httpRequest.responseText;
var result = resultText.split('|');
var count = parseInt(result[0]);
var keywordList = null;
if (count > 0) {
// 첫번째 것을 쉼표로 쪼갭니다.
keywordList = result[1].split(',');
var html = '';
for (var i = 0; i < keywordList.length; i++) {
// 링크를 걸어 화면에 출력합니다.
html += "<a href=\"javascript:select('" + keywordList[i] + "')\">"
+ keywordList[i] + "</a><br/>";
}
// list값을 얻어옵니다.
var listView = document.getElementById('suggestList');
listView.innerHTML = html;
show('suggest');
} else {
hide('suggest');
}
} else {
alert("에러 발생: " + httpRequest.status);
}
}
}
// 선택하는 경우 값이 입력됩니다.
function select(selectedKeyword) {
document.search.keyword.value = selectedKeyword;
loopSendKeyword = false;
checkFirst = false;
hide('suggest');
}
function show(elementId) {
var element = document.getElementById(elementId);
if (element) {
// 화면을 보이게 합니다.
element.style.display = '';
}
}
function hide(elementId) {
var element = document.getElementById(elementId);
if (element) {
element.style.display = 'none';
}
}
</script>
<style>
#view {
border: 1px solid #999;
}
</style>
</head>
<body>
<form name="search">
<input type="text" name="keyword" id="keyword" onkeydown="startSuggest()" />
<input type="button" value="검색" />
<div id="suggest" style="display:none; position: absolute; left: 0px; top: 30px;">
<div id="suggestList">
<!-- 목록이 출력되는 공간입니다. -->
</div>
</div>
</form>
</body>
</html>
|
- 'suggestclient.html'을 실행합니다.
- 입력값이 없는 경우 결과를 숨깁니다.
- 검색어를 입력할 때마다 조회가 발생합니다.
반응형
'Ajax' 카테고리의 다른 글
| Ajax_DOM_DOM API 를 사용하여 문서 구조 변경하기 (0) | 2023.10.20 |
|---|---|
| Ajax_DOM_Document Object Model 과 XML (0) | 2023.10.19 |
| Ajax_innerHTML_CSV 양식의 응답 텍스트 분석하여 화면에 출력하기 (0) | 2023.10.18 |
| Ajax_innerHTML_웹 서버의 응답 결과 반영하기 (0) | 2023.10.17 |
| Ajax_innerHTML_1 초마다 현재 시간을 출력합니다. (0) | 2023.10.17 |
'Ajax' Related Articles
more
