[ Jquery ] 제이쿼리 실시간 검색어 자동완성 ajax 통신 방법 & 예제

안녕하세요.

오늘은 제이쿼리 자동완성 기능에 대해서 설명 드리겠습니다. Web개발을 하면서 DB에있는 데이터를 기반으로 자동완성 기능을 개발 해달라고하는 경우가 종종 있습니다. 그래서 오늘은 Ajax통신을 통해 실시간으로 DB에 있는 데이터를 기준으로 자동완성 기능을 만들어 보겠습니다.

 

 

설명

1. 입력 필드를 만듭니다.

↓ 소스 참조

<div>
    <input type="text"  id="testInput"  placeholder="자동완성" />
</div>
 

 

2. id를 기준으로 autocomplete 기능을 선언 해줍니다.

↓ 소스 참조

 

<script>
 
    $("#testInput").autocomplete({
        source : function(request, response) {
            $.ajax({
                  url : "/get/test"
                , type : "GET"
                , data : {keyWord : $("#testInput").val()} // 검색 키워드
                , success : function(data){ // 성공
                    response(
                        $.map(data, function(item) {
                            return {
                                  label : item.testNm    //목록에 표시되는 값
                                , value : item.testNm    //선택 시 input창에 표시되는 값
                                , idx : item.testIdx    // db 인덱스를 담을수 있음 (예제)
                            };
                        })
                    );    //response
                }
                ,
                error : function(){ //실패
                    alert("통신에 실패했습니다.");
                }
            });
        }
        , minLength : 1    
        , autoFocus : false    
        , select : function(evt, ui) {
            console.log("전체 data: " + JSON.stringify(ui));
            console.log("db Index : " + ui.item.idx);
            console.log("검색 데이터 : " + ui.item.value);
        }
        , focus : function(evt, ui) {
            return false;
        }
        , close : function(evt) {
        }
    });
 
</script>

※ 이벤트 설명

- source : input 필드에 타이핑시 동작합니다.

- minLength : 조회를 위한 최소 글자수입니다.

- autoFocus : 첫번째 항목 자동 포커스(기본값 : false)

- select : 검색 리스트에서 해당 필드 선택시 select 이벤트가 발생합니다.

- focus : 한글 오류 방지입니다.

- close : 리스팅 창이 닫힐때 발생하는 이벤트 입니다.

 

 

추천글

[Java] 자바 문자열 null 체크방법 & 공백체크 방법

[Java] 자바 Map, HashMap 사용법 & 예제

MYSQL 스케줄러(스케쥴러) 사용방법 & 예제