통합검색

Javascript

[jQuery] jQuery UI autocomplete 적용하기



jQuery UI에 기본 탑재된 자동완성 기능 (autocomplete) 샘플 코드.
배열을 미리 선언하여 사용하는 방법과 ajax 방식으로 배열을 가져와 구동하는 방법으로 사용할 수 있는데
아래 예시는 배열을 미리 선언한 뒤 사용하는 방식이다.


[!]자동완성 배열 선언[/!] 
searchSource = [
   { 'label' : '서울', 'value' : 'seoul' }.
   { 'label' : '대전', 'value' : 'daejun' }
]



[!]자동완성 적용[/!] 
위에서 선언된 배열을 자동완성으로 적용하는 예제이며,
자동완성을 선택하는 경우 위 배열 중 'value'는 input의 value가 되며,
'label'은 자동완성에서 노출될 항목명이 된다.
 
<HTML>
 
<input type="text" name="address" autocomplete="off">


<jQuery>
 
$('input[name="address"]').autocomplete({
    'source' : searchSource, // 위에서 선언한 배열
    'minLength' : 0, // 최소 몇글자 입력시 자농완성 노출할 것인지
    'autoFocus' : false, // 자동으로 첫번째 항목에 focus를 위치시킬 것인지
    'position' : { my : 'right top', at : 'right bottom' }, // 자동완성 창의 노출 위치
    'delay' : 0, // 노출 딜레이 시간
    'z-index' : 999, // z-index
    'classes' : {}, // 자동완성 기본 css class 를 custom class로 대입하는 옵션.
    'select' : function(event, ui) {}, // 항목 선택시 수행할 작업
    'focus' : function(event, ui) {}, // 항목 focus시 수행할 작업
    'close' : function(event) {} // 닫는 경우 수행할 작업
}).on({
    'focus' : function() {
        $(this).autocomplete("search", ""); // input에 포커싱 되는 순간 자동완성이 열리게 하는 코드
    }
});


autocomplete가 적용된 ui는 아래 예시와 같다.


 
리스트