네이버 검색창에서 검색어를 입력하면, 자동완성 된 검색어가 뜨는걸 본 적이 있으실 겁니다. 아래와 같이 말이죠
오늘은 위와 같은 기능을 아~~주 간단한 형태로 만들어 보고자 합니다.
전문적인 검색엔진이나 검색기능에 대한 자료를 참고하시고자 하시는분께서는 잘못 찾아오셨습니다.
위와 같은 기능을 간단히 만들기 위해서
스프링 기반의 웹프로젝트에 JsonConverter 를 등록하고, contentNegotiation 설정을 해준 후,
@ResponseBody 와 jquery 의 $.getJSON 을 사용할 것입니다.
디비는 MySQL 을 사용할 것입니다. MySQL 을 사용한 이유는 제가 cloudfoundry를 이용하는데 cloudfoundry 에서 MySQL 을 지원하기 때문입니다
우선 응답을 json 형태로 받아야 하기 때문에(꼭 json일 필요는 없지만 json이 이용하기 편하므로),
JsonConverter 를 등록해줘야 합니다.
저 같은 경우 스프링 3.2 로 버전업 되면서 @Configuration이 많이 강화 됐기 때문에 xml 설정보단 @Configuration 설정을 더 선호하고 있습니다. (앞으로 서서히 xml 에서 자바 @Configuration 으로 설정파일이 대체될 것 으로 생각됩니다)
다음은 contentNegotiation 을 설정 합니다.
.json , .xml 과 같은 url 확장자를 이용해 응답 결과를 등록한 Converter 로 convert 하기 위함입니다.
Tip. 응답 결과 변환에 json , xml 만 필요하다면 굳이 contentNegotiatingViewResolver 를 등록하는 것 보단
간단히 contentNegotiation 만 설정하고 @ResponseBody 를 사용하는 것이 좀 더 깔끔 합니다.
다만, 응답 결과 변환에 json, xml 뿐만 아니라 xls 등이 필요하다면 contentNegotiatingViewResolver 를 등록할 필요가 있을 것 같습니다.
contentNegotiation 을 설정해 주는 부분입니다. 각 설정 항목에 대해선 contentNegotiation 에 대해 검색해 보시면 금방 나옵니다
이로써 @ResponseBody 를 사용하여 응답 결과를 json 으로 변환할 준비는 마쳤습니다.
많이 검색된 검색어가 디비에 저장됐다고 가정을 했습니다
이미지에서 보이듯 이 (ihateyou,iloveyou,반갑습니다,사랑해요,안녕하세요,최예령 아이러브 유) 를 insert 했습니다.
(최예령 은 제 딸 이름입니다 ㅋ)
다음은 컨트롤러 단 입니다.
컨트롤러 단은 아주 단순합니다.
@ResponseBody 를 사용하여 응답을 List<AutoCompletionText> 를 리턴해주도록 하였고,
xml, json 으로 형식의 요청에만 한정 하도록 produces={"application/xml", "application/json"} 를 @RequestMapping 속성으로 주었습니다.
boardService.autoText(searchText) 는 아주 단순한 select 를 수행합니다.
<select id="autoText" parameterType="String" resultType="AutoCompletionText">
select autotext from autocomtext
where autotext like concat(#{searchText},'%')
</select>
단순한 like 검색입니다.
마지막 뷰입니다.
$(document).ready(function(){
$('#searchText').keyup(function(){ // searchText 아이디를 가진 element 에서 keyup 이벤트가 발생하면
$("#autoText").empty(); // #autoText 아이디를 가진 element 를 비우고
$.getJSON('autotext.json', {searchText:$("#searchText").val()}, function(data){ //get방식 으로 Json 응답을 요청합니다.
$.each(data, function(){ //응답에서 리턴한 결과값의 요소를 반복문 을 돌면서 처리 합니다.
$("#autoText").append(this.autoText+'</br>'); // autoText 아이디를 가진 element 에 응답 결과값(autoText)을 추가 합니다.
});
});
});
});
<input type="text" id="searchText" /><br />
<div id="autoText"></div>
위 소스에만 주목 해 주시면 됩니다.
간단히 설명을 드리자면,
keyup 이벤트가 발생하였을 때, json 형태로 응답을 가져와서 autoTex div 영역에 결과를 append 해주는 것입니다
최종 결과 화면입니다..
허접하지만 @ResponseBody , jquery, json 을 활용하기 위한 간단한 예재를 만들어보았습니다 ^^