Javascript
[jQuery] jQuery UI autocomplete 적용하기
- 2023.07.05 19:44:10
 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는 아래 예시와 같다.  |