포털에서 검색시 사용되는 기능인 자동완성 기능인 jQuery Autocomplete 기능을 구현해 보겠습니다.
1. 자동완성이란?
구글이나 네이버등에서 단어의 초성을 입력하면 이와 관련된 단어의 목록을 보여주는 것.
위와 같이 입력한 단어에 근접한 단어나 문장을 보여줍니다.
2. 구현 방법
이런 기능을 구현하기 위해서는 jQuery, Ajax, JSP 등을 이용하여 구현할 수 있습니다.
일단 Plugin을 이용하여 구현해야 하기 때문에 이를 지원하는 JQuery를 JSP상단에 지정해야 합니다.
3. 예제 소스
소스코드는 Spring 프레임워크와 Mybatis를 기준으로 구성하였습니다.
- 화면단 – JSP
<script src="http://code.jquery.com/jquery-1.7.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <html> <style> .ui-autocomplete { overflow-y: scroll; overflow-x: hidden;} </STYLE> <script type="text/javascript"> $(document).ready(function() { $("#testText").autocomplete({ source : function(request, response) { $.ajax({ url : "/autocomplete", type : "post", dataType : "json", data: request, success : function(data) { var result = data; response(result); }, error : function(data) { alert("에러가 발생하였습니다.") } }); } }); }); </script> <body> <form id="testform" name="testform"> <input type="text" id="testText" placeholder="이름을 입력하세요"> <input type="button" value="Click" /> </form> </body>
- 컨트롤러 – JAVA
@RequestMapping(value = "/autocomplete", method = RequestMethod.POST) public void AutoTest(Locale locale, Model model, HttpServletRequest request, HttpServletResponse resp, DTO dto) throws IOException { String result = request.getParameter("term"); List list = dao.listAll2(result); //result값이 포함되어 있는 emp테이블의 네임을 리턴 JSONArray ja = new JSONArray(); for (int i = 0; i < list.size(); i++) { ja.add(list.get(i).getEname()); } PrintWriter out = resp.getWriter(); out.print(ja.toString()); }
- 쿼리
<select id="listAll2" parameterType="String" resultType="aa.bb.cc.DTO"> select ename from emp where ename like concat('%',concat(UPPER(#{b}),'%')) or ename like concat('%',concat(LOWER(#{b}),'%')) </select>
4. 소스 설명
- testText 인풋 박스에 검색어를 입력합니다.
- autocomplete의 명령에 따라 /autocomplete aJax url요청이 발생합니다.
- JAVA단의 컨트롤러로 요청이 생기면서 Mybatis DB쿼리가 작동합니다.
- SELECT된 데이터가 JSON 데이터 형태로 리턴됩니다.
- JSP 화면에서 리턴된 JSON데이터를 testText 부분에 출력합니다.
※ DB SELECT시 concat 함수는 검색시 대소문자를 쓰게 되면 소문자는 검색이 안되기 때문에 대/소문자를 호환하기 위해 사용하였습니다.
5. 결과
위와 같이 Autocomplete를 이용하여 DB상의 직원이 나타난 모습입니다.
원래 a로 시작되는 인물만 검색이 되나 하나 위의 소스는 a가 들어간 모든 직원이 검색되는 형태로 개발되었습니다.
6. 마지막으로
개발 소스중 중간에 DTO나 DAO의 생성이 필요한데요. 이는 이전 포스팅에서 많이 보여드려서 절차상 생략하였습니다.
이에 관해 궁금증이 있으면 이전 Mybatis 관련 포스팅을 보면 되시면됩니다.
혹시 위의 소스대로 했는데 구동이 안되시는 분들을 위해 Autocomplete 예제는 첨부파일로 남겨드리도록 하겠습니다.
답글 남기기