진화를 꿈꾸다..

자동완성 기능

| TIP 2012. 5. 22. 09:55

Posted by S & S

<Google Suggestion 의 ajax 를 활용한 자동완성 기능>

위 그림과 같은 자동완성 기능은 Google Suggest 에서 가장 먼저 구현하였다. 그 후 국내에는 네이버를 필두로 지금은 거의 모든 포탈업체의 검색창에는 마치 유행처럼 위와 같은 기능이 구현되어 있다.

<네이버의 자동완성 기능>

<다음의 자동완성 기능>

필자는 2005년 4월경 ajax 대신에 iframe 을 사용하여 자동완성 기능을 구현한 적이 있는데, 검색된 결과를 보여주는 창을 하나의 파일로 따로 만들어서 사용했었고 속도도 다소 느렸던 것으로 기억한다.

그럼 ajax 를 이용하여 단순한 자동완성 기능 예제를 살펴보자.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Ajax Auto Complete</title>
<style type="text/css">

.mouseOut {
background: #708090;
color: #FFFAFA;
}

.mouseOver {
background: #FFFAFA;
color: #000000;
}
</style>
<script type="text/javascript">
var xmlHttp;
var completeDiv;
var inputField;
var nameTable;
var nameTableBody;

function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}

}

function initVars() {
inputField = document.getElementById("names");
nameTable = document.getElementById("name_table");
completeDiv = document.getElementById("popup");
nameTableBody = document.getElementById("name_table_body");
}

var row, cell, txtNode;
for (var i = 0; i < size; i++) {
var nextNode = the_names[i].firstChild.data;
row = document.createElement("tr");
cell = document.createElement("td");

cell.onmouseout = function() {this.className='mouseOver';};
cell.onmouseover = function() {this.className='mouseOut';};
cell.setAttribute("bgcolor", "#FFFAFA");
cell.setAttribute("border", "0");
cell.onclick = function() { populateName(this);};

txtNode = document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
nameTableBody.appendChild(row);
}
}

function setOffsets() {
var end = inputField.offsetWidth;
var left = calculateOffsetLeft(inputField);
var top = calculateOffsetTop(inputField) + inputField.offsetHeight;

completeDiv.style.border = "black 1px solid";
completeDiv.style.left = left + "px";
completeDiv.style.top = top + "px";
nameTable.style.width = end + "px";
}

function calculateOffsetLeft(field) {
return calculateOffset(field, "offsetLeft");
}

function calculateOffsetTop(field) {
return calculateOffset(field, "offsetTop");
}

function calculateOffset(field, attr) {
var offset = 0;
while(field) {
offset += field[attr];
field = field.offsetParent;
}
return offset;
}

function populateName(cell) {
inputField.value = cell.firstChild.nodeValue;
clearNames();
}

function clearNames() {
var ind = nameTableBody.childNodes.length;
for (var i = ind - 1; i >= 0 ; i--) {
nameTableBody.removeChild(nameTableBody.childNodes[i]);
}
completeDiv.style.border = "none";
}

</script>
</head>
<body>
<h1>Ajax Auto Complete Example</h1>
Names: <input type="text" size="20" id="names" onkeyup="findNames();" style="height:20;"/>
<div style="position:absolute;" id="popup">
<table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0"/>
<tbody id="name_table_body"></tbody>
</table>
</div>
</body>
</html>

<autoComplete.html 의 전체 소스 코드>

package ajaxbook.chap4;

import java.io.*;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import javax.servlet.*;
import javax.servlet.http.*;

/**
*
* @author nate
* @version
*/
public class AutoCompleteServlet extends HttpServlet {

private List names = new ArrayList();

public void init(ServletConfig config) throws ServletException {
names.add("Abe");
names.add("Abel");
names.add("Abigail");
names.add("Abner");
names.add("Abraham");
names.add("Marcus");
names.add("Marcy");
names.add("Marge");
names.add("Marie");
}

/** Handles the HTTP <code>GET</code> method.
   * @param request servlet request
   * @param response servlet response
   */
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String prefix = request.getParameter("names");
NameService service = NameService.getInstance(names);
List matching = service.findNames(prefix);

if (matching.size() > 0) {
PrintWriter out = response.getWriter();

response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");

out.println("<response>");
Iterator iter = matching.iterator();
while(iter.hasNext()) {
String name = (String) iter.next();
out.println("<name>" + name + "</name>");
}
out.println("</response>");
matching = null;
service = null;
out.close();
} else {
response.setStatus(HttpServletResponse.SC_NO_CONTENT);
//response.flushBuffer();
}

}

/** Handles the HTTP <code>POST</code> method.
   * @param request servlet request
   * @param response servlet response
   */
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}

/** Returns a short description of the servlet.
   */
public String getServletInfo() {
return "Short description";
}
}

<AutoCompleteServlet.java 의 전체 소스 코드>

package ajaxbook.chap4;

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

/**
*
* @author nate
*/
public class NameService {
private List names;

/** Creates a new instance of NameService */
private NameService(List list_of_names) {
this.names = list_of_names;
}

public static NameService getInstance(List list_of_names) {
return new NameService(list_of_names);
}

public List findNames(String prefix) {
String prefix_upper = prefix.toUpperCase();
List matches = new ArrayList();
Iterator iter = names.iterator();
while(iter.hasNext()) {
String name = (String) iter.next();
String name_upper_case = name.toUpperCase();
if(name_upper_case.startsWith(prefix_upper)){
boolean result = matches.add(name);
}
}
return matches;
}

}

저작자표시 비영리 동일조건

'TIP' 카테고리의 다른 글

SQL SERVER – Few Useful DateTime Functions to Find Specific Dates (1)	2013.05.01
윈도우7에서 네트워크 폴더 공유할 때 접속 제한이.. (0)	2012.08.30
비주얼 스튜디오 단축키 (0)	2011.09.08
ウィンドウ終了 (0)	2010.11.01
戻るボタン禁止 (0)	2010.09.14

And

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | ··· | 230 |

일	월	화	수	목	금	토
			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

진화를 꿈꾸다..

Article Category

Notice

Recent Article

Recent Comment

Recent Trackback

자동완성 기능

'TIP' 카테고리의 다른 글

Tag Cloud

Calendar

Archive

My Link

티스토리툴바