Contents

1. suggest.jsp

입력값 : keyword=aja
결과값 :2|AJAX,AJAX 실전 프로그래밍

<%@ page contentType = "text/plain; charset=euc-kr" %>
<%@ page import = "java.util.List" %>
<%!
    // 원래는 DB에서 가져와야 한다.
    String[] keywords = {
        "AJAX",
        "AJAX 실전 프로그래밍",
        "자라",
        "자바 프로그래밍",
        "자바 서버 페이지",
        "자바스터디",
        "자바서비스",
        "자바캔"
    };
   
    public List search(String keyword) {
        // 없으면 empty로 리턴
        if (keyword == null || keyword.equals(""))
            return java.util.Collections.EMPTY_LIST;
        // 있으면 List로 리턴
        keyword = keyword.toUpperCase();
        List result = new java.util.ArrayList(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");
    System.out.println("keyword : " + keyword);
    List keywordList = search(keyword);

    // 결과값 갯수
    out.print(keywordList.size());
    out.print("|");

    // CSV 형식으로 리턴을 위해 for 루프
    for (int i = 0 ; i < keywordList.size() ; i++) {
        String key = (String)keywordList.get(i);
        out.print(key);
        if (i < keywordList.size() - 1) {
            out.print(",");
        }
    }
%>

2. suggestclient.html

IE는 한/영 상관없이 keydown에 의한 이벤트가 실행되지만, FF는 영문일때는 정상작동하지만 한글일 경우 keydown에 의한 이벤트가 실행되지 않는다.따라서 0.5초간격으로 startSuggest()를 실행하여주고 서버로의 부하를 줄이기 위해 아래와 같은 변수를 사용한다.
checkFirst : 처음실행시 초기화
lastKeyword : 마지막 입력한 키워드, 0.5초후 startSuggest() 실행시 기존의 키워드와 같으면 서버로 request 안함
loopSendKeyword : 사용자가 suggest된 키워드를 선택시 더이상의 loop는 필요없으므로 이때 false됨

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
    <meta http-equiv="content-type" content="text/html; charset=euc-kr" />
    <title>서제스트</title>
    // 맨날 쓰던 XMLHttpRequest 관련 스크립트
    <script type="text/javascript" src="httpRequest.js"></script>
    // 0.5초 간격으로 startSuggest() 실행에 대한 확인용 디버그
    <script type="text/javascript" src="log.js"></script>
    <script type="text/javascript">
    var checkFirst = false;
    var lastKeyword = '';
    var loopSendKeyword = false;
   
    // onkeydown 이벤트에 의해 호출
    function startSuggest() {
        if (checkFirst == false) {
            setTimeout("sendKeyword();", 500);
            loopSendKeyword = true;
        }
        checkFirst = true;
    }

   // 키워드를 서버로 전송하고 결과값을 화면에 표시
    function sendKeyword() {
        log("sendKeyword 시작 : keyword["+document.search.keyword.value+"], checkFirst["+checkFirst+"], lastKeyword["+lastKeyword+"], loopSendKeyword["+loopSendKeyword+"]");

        // 사용자가 제시된 키워드를 클릭시 더이상의 loop는 필요없다
        if (loopSendKeyword == false) return;
       
        var keyword = document.search.keyword.value;

        // 키워드가 없을때 서버로 requset 없음
        if (keyword == '') {
            lastKeyword = '';
            hide('suggest');

        // 키워드가 변경되었을때 서버로 request
        } else if (keyword != lastKeyword) {
            lastKeyword = keyword;
           
            if (keyword != '') {
                var params = "keyword="+encodeURIComponent(keyword);
                sendRequest("suggest.jsp", params, displayResult, 'POST');
            } else {
                hide('suggest');
            }
        }

        // 반복하여 자신을 호출
        setTimeout("sendKeyword();", 500);
    }
    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/>";
                    }
                    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';
        }
    }

    window.onload = function() {
        log("window.onload 호출");
        loadList();
    }

    </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:; postion: absolute; left: 0px; top: 30px;">
    <div id="suggestList"></div>
</div>
<div id="debugConsole" style="border: 1px solid #000"></div>
</form>

</body>
</html>

개인생각 : 사용자의 입력이 없어도 키워드를 최초 입력 이후에는 0.5초 간격으로 sendKeyword()가 계속 호출된다. 서버의 부하에는 영향을 미치지 않지만 클라이언트 측면에서는 조금 부하가 있을듯하다. 수정의 요지가 있는듯. 예를 들어 FF일때만 loop를 돌던가, FF일때만 keyword 변경을 체크하여 IE와 같은 구조로 가던가..