jquery ui autocomplete를 이용하여 ajax 자동완성 구현
jquery ui의 autocomplete 기능을 이용해 검색어를 입력하면 ajax로 입력한 검색어를 전송 후 검색이 완료된 검색어와 값을 input 박스에 보여주고 선택한 값을 화면에 뿌려주는 기능입니다. jquery 자바스크립트 파일 외에 jquery-ui js파일과 jquery-ui 테마 css 파일이 필요합니다.
html 소스
테스트를 위한 html 소스
<div>
<label for="local">공장검색 : </label>
<input type="text" id="jquery-autocomplete">
</div>
<div style="margin-top:20px;">
선택값:
<div id="select-data" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
 |
테스트를 위한 html 페이지 |
테스트를 위한 js소스
값 데이터
단순히 key, value 기능으로만 사용할 경우 json 데이터에 key 이름으로 id와 value만 지정해주면 됩니다. id와 value는 필수 값이라 변경이 불가하고 (이 이름을 변경하면 input박스에 검색어가 표시 안됩니다) 여기서 검색된 값을 선택했을 후 화면에 뿌려줄때 다른 데이터도 붙이고 싶다면 아래 리턴 데이터 예제 처럼 type,date (이름은 임의로 붙여주면 됩니다) 등을 붙여 autocomplete select 이벤트에서 처리하면 됩니다.
(검색어를 ajax로 보내고 받은 리턴 json 데이터라 가정)
[{id : '01', value : '서울공장', type : '시멘트', date : '1999-10-5'}
,{id : '02', value : '충주공장', type : '목재', date : '2003-11-3'}
,{id : '03', value : '부산공장', type : '페인트', date : '2022-5-19'}]{codeBox}
 |
json에서 key 이름을 value로 지정한 값이 표시됩니다 |
js소스
$('#jquery-autocomplete').autocomplete({
source : function(request, response) {
$.ajax({
url : '/localSearch.jsp'
, type : 'POST'
, dataType: 'JSON'
, data : {term: request.term} // 입력한 검색어
, success : function(data){
response( data ); ajax를 통해 받은 데이터, 자동검색에 들어간다
}
,error : function(){
console.log('검색결과 없음');
}
});
}
,focus : function(event, ui) { // 방향키로 자동완성단어 선택 가능하게 만들어줌(false로 선택하지 않으면 방향키 다운시 단어가 선택되어 버림)
return false;
}
,minLength: 2// 최소 검색 글자수
,autoFocus : true // 검색되어 보여지는 첫 번째 항목이 자동으로 선택되도록 설정
,delay: 150 // 키 입력이 발생한 시점과 검색이 수행된 시점 사이의 지연 시간 딜레이 값이 너무 작으면 민감하게 반응하여 검색이 잘 안됨
,select : function(evt, ui) {
// 검색 성공 후 선택한 값 처리
// ui.item 에서 JSON의 키값을 선택
var select_item = '';
select_item = select_item + '<table>';
select_item = select_item + '<td>' + ui.item.id + '</td>';
select_item = select_item + '<td>' + ui.item.value + '</td>';
select_item = select_item + '<td>' + ui.item.type + '</td>';
select_item = select_item + '<td>' + ui.item.date + '</td>';
select_item = select_item + '</table>';
$('#select-data').append(select_item);
}
});
 |
충주공장을 선택하면 json 데이터에 들어있던 id type date 값도 가져올 수 있습니다 |
jsfiddle로 만들어본 예제
jsfiddle에선 ajax로 java에서 데이터를 불러올 수 없기 때문에 간단하게 테스트 해볼 수 있을 정도로만 되어 있습니다.