autocomplete 함수를 이용한 ajax 비동기 자동완성

출처 : http://hellogk.tistory.com/74

jQueryUI에서 지원하는 기능 중 "자동완성"에 대하여 포스팅 해보도록 하겠습니다.

자동완성기능은 구글이나 네이버,다음과 같은 검색포털서비스에서 

볼수 있는 기능입니다.

우선 자바스크립트 배열에 문자열 값을 몇가지 넣고 간단하게 자동완성 기능을 구현해보도록 하겠습니다.

?

1 2	<h2>자동완성기능</h2> <input id="autocomplete" type="text" />

일반 text 태그의 입력 값에 따라 배열에 정의된 

문구들 중 매칭시켜 목록 출력시켜주기 위한

스크립트 코드는 다음과 같습니다.

?

1 2 3 4 5 6

$(function(){     var autocomplete_text = ["자동완성기능","Autocomplete","개발로짜","국이"];          $("#autocomplete").autocomplete({             source: autocomplete_text          }); })

autocomplete() 함수내에 source속성은 저장공간이랑 비슷한 개념입니다.

HTML/JAVASCRIPT 코드를 작성을 하셨다면 실행을 해보도록 하겠습니다.

한/영 구분없이 정상적으로 목록이 출력된 것을 확인하였습니다.

이번에는 ajax통신을 하여 자동완성을 구현해보겠습니다.

통신을 하여 자동완성을 구현해보기 위해서

 JSON 타입으로 파싱하여 응답하는 방식으로 진행하겠습니다.

2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기

JSON-SIMPLE 라이브러리를 이용하여 JSON 데이터를 만들도록 하겠습니다.

우선은 기존 html태그는 놔두고 스크립트 코드만 변경해보도록 하겠습니다.

?

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

$(function(){     $( "#autocomplete" ).autocomplete({         source : function( request, response ) {              $.ajax({                     type: 'post',                     url: "/autocomplete.jsp",                     dataType: "json",                     //request.term = $("#autocomplete").val()                     data: { value : request.term },                     success: function(data) {                         //서버에서 json 데이터 response 후 목록에 뿌려주기 위함                         response(                             $.map(data, function(item) {                                 return {                                     label: item.data,                                     value: item.data                                 }                             })                         );                     }                });             },         //조회를 위한 최소글자수         minLength: 2,         select: function( event, ui ) {             // 만약 검색리스트에서 선택하였을때 선택한 데이터에 의한 이벤트발생         }     }); })

코드가 길어진것 같지만

 $.ajax 사용해신 분이시라면 익숙하실겁니다.

다음은 서버 페이지(autocomplete.jsp)에 대한 코드를 확인해보겠습니다.

?

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 32 33 34 35 36 37

request.setCharacterEncoding("UTF-8");     String value = request.getParameter("value");     JSONArray list = new JSONArray();     JSONObject object = null;           if(value.indexOf("개발") > -1) {         object = new JSONObject();         object.put("data", "개발자");         list.add(object);         object = new JSONObject();         object.put("data", "개발로짜");         list.add(object);         object = new JSONObject();         object.put("data", "개발이 어려워요");         list.add(object);         object = new JSONObject();         object.put("data", "개발이란?");         list.add(object);     }else if(value.indexOf("블로") > -1) {         object = new JSONObject();         object.put("data", "블로그꾸미기");         list.add(object);               object = new JSONObject();         object.put("data", "블로그누락");         list.add(object);         object = new JSONObject();         object.put("data", "개발로짜의블로그");         list.add(object);         object = new JSONObject();         object.put("data", "블로장생");         list.add(object);     }               PrintWriter pw = response.getWriter();     pw.print(list);     pw.flush();     pw.close();

코드를 설명을 해보자면

 텍스트박스에 검색 2글자 입력을 할경우 

"개발" 혹은 "블로" 라는 문자열이 입력될경우에만 

검색목록이 나오게 하는 샘플코드입니다.

DB에서 LIKE절을 사용하여 조회한다고 가정하고 임의로 작성한 서버코드입니다.

그럼 실행을 한번 해보겠습니다.

초기화면에 나타나는 태그는 작업을 별도로 하지 않았으므로 기본 태그입니다.

이제 "개발"이란 단어를 입력해보겠습니다.

개발이라고 입력하니 json으로 임의로 담았던 4개의 검색결과가 출력이 되었네요 ㅋ 

그럼 원하는 결과값 선택!

정상적으로 담겼습니다.

다음으로 "블로"라는 단어를 입력 해보겠습니다.

이번값 역시 잘 출력이 됩니다.

역시 원하는 결과값 클릭!

ajax 비동기 방식으로도 자동완성기능을 간단하게나마 구현해보았습니다

다음은 "sortable" 기능을 이용하여  리스트 목록의 순서를 드래그앤드롭으로 변경해보는 내용을 포스팅하도록 하겠습니다.