팁&정보

자동완성기능

우서바 2011. 5. 27. 04:25

<!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");
        }
        function findNames() {
            initVars();
            if (inputField.value.length > 0) {
                createXMLHttpRequest();
                var url = "/tomcat/servlet/ajaxbook.chap4.AutoCompleteServlet?names=" + encodeURI(inputField.value);
                xmlHttp.open("GET", url, true);
                xmlHttp.onreadystatechange = callback;
                xmlHttp.send(null);
            } else {
                clearNames();
            }
        }
        function callback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    setNames(xmlHttp.responseXML.getElementsByTagName("name"));
                } else if (xmlHttp.status == 204){//데이터가 존재하지 않을 경우
                    clearNames();
                }
            }
        }
      
        function setNames(the_names) {
            clearNames();
            var size = the_names.length;
            setOffsets();
            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
 */
// [root@localhost chap4]# javac AutoCompleteServlet.java NameService.java
// Note: Some input files use unchecked or unsafe operations.
// Note: Recompile with -Xlint:unchecked for details.
// 컴파일은 이렇게 하면 되는구나.. ㅎㅎ

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");
        names.add("스타크");
        names.add("스타크래프트");
        names.add("스타크래프트 치트키");
        names.add("스타크래프트 다운로드");
    }
  
    /** 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 {
//    request.setCharacterEncoding("UTF-8"); //들어오는 요청값을 utf-8로 인코딩한다는 뜻, server.xml에 설정을 해 놓았기때문에, 주석처리해도 잘 작동함 (단, server.xml설정없이 사용하면 제대로 안됨)
    response.setCharacterEncoding("UTF-8"); // 나가는 응답값을 utf-8로 인코딩해서 보낸다는 뜻, 이 것을 주석처리할경우
// PrintWriter out = response.getWriter(); 대신에
// PrintWriter out = new PrintWriter(new OutputStreamWriter(response.getOutputStream(), "UTF-8")); 로 처리해야
        String prefix = request.getParameter("names");
        NameService service = NameService.getInstance(names);
        List matching = service.findNames(prefix);
        if (matching.size() > 0) {
// 첫째,
// /etc/tomcat6/server.xml 에서 
// <Connector port="8080" protocol="HTTP/1.1"
//           connectionTimeout="20000"
//           redirectPort="8443" URIEncoding="UTF-8" />
// <Connector port="8009" protocol="AJP/1.3" redirectPort="8443" URIEncoding="UTF-8" />
// 라고 수정/추가한후 /etc/init.d/tomcat6 restart 하여, tomcat의 내부적 송수신을 utf-8로 설정
// 특히, Client -- httpd -- tomcat 인 나의 환경에선, AJP프로토콜의 UTF-8설정이 주요한듯
// AJP UTF-8 설정을 빼버리면, html문서에서 encodeURI로 utf-8형식으로 전송을 해도, servlet이 알아먹지를 못함
// AJP UTF-8 설정이 안되어있으면, request.setCharacterEncoding("UTF-8"); 라고 해줘도 servlet이 한글을 알아먹지 못함
//
// 둘째,
// 첫째의 환경을 적용하였다면 request.setCharacterEncoding("UTF-8"); 는 없어도 정상작동
// (단 첫째의 환경을 적용하지 않았다면, request.setCharacterEncoding("UTF-8"); 있어도 비정상 작동)
//
// 셋째,
// response.setCharacterEncoding("UTF-8"); 단독 사용 - 정상
// PrintWriter out = new PrintWriter(new OutputStreamWriter(response.getOutputStream(), "UTF-8")); : 단독사용 - 정상
// 위 두개 동시 사용 - 정상
//
        //PrintWriter out = new PrintWriter(new OutputStreamWriter(response.getOutputStream(), "UTF-8"));
            PrintWriter out = response.getWriter();
            response.setContentType("text/xml;charset=UTF-8");
            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";
    }
}

< 수정된 ../WEB-INF/classes/ajaxbook/chap4/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;
    }
  
}

< 수정된 ../WEB-INF/classes/ajaxbook/chap4/NameService.java 소스 > 

 

저작자표시 비영리 변경금지

'팁&정보' 카테고리의 다른 글

생활코딩  (0) 2012.03.28
컴퓨터 1달 전기요금 대략  (0) 2012.01.07
현대인이 알아야 할 조문 예절  (0) 2011.05.17
목소리좋아지는법으로 매력적인목소리를   (0) 2011.05.07
아침에 피부가 좋아보이는 이유  (0) 2011.05.07

'팁&정보'의 다른글

  • 현재글자동완성기능

관련글

티스토리툴바