jQuery autocomplete 설정

급하게 자동완성 검색을 넣어야할 일이 생겨서 autocomplete를 사용하게 되었으나

간단하게 처리될줄 알았던 것들이 몇가지 문제들로 시간을 잡아먹음...

문제 1) 파이어폭스 작동문제

파폭에서 한글검색이 안되는 문제가 있다..

문제 2) 포커스위치로 인한 자동선택문제

크롬에서 포커스 위치때문에 검색된 첫번째 데이터가 자동으로 선택되는 문제가 있다..

문제 1 해결방법

2가지를 찾았는데 

하나는 강제로 keydown을 주는 방법

setInterval(function() { $('#addrSch').filter('[value!=""]:focus').trigger('keydown'); }, 1000);

또 하나는 파폭일때만 딜레이 시간을 길게 주는 방법

var delay = 10;
	if( $.browser.mozilla ){delay = 200;}

문제 해결방법

focus 옵션을 강제로 줘서 선택이 안되게 함

focus: function() {
				// prevent value inserted on focus
				return false;
		},



아래는 작업에 대한 총 소스

$(function(){
	var delay = 10;
	if( $.browser.mozilla ){delay = 200;}
	setInterval(function() { $('#addrSch').filter('[value!=""]:focus').trigger('keydown'); }, 1000);
	$("#addrSch").autocomplete({
		source : function( request, response ) {
			//console.log(escape(request.term));
			$.ajax({
				type: 'post',
				url: "addSearch.asp",
				dataType: "json",
				data: { name : escape(request.term) },
				success: function(responseData){
            var array = responseData.map(function(element) {
                return {value: element['ADDR'], id: element['ZIPCODE']};
            });
            response(array);
        }
			});
		},
		delay: delay, //지연시간
		minLength: 2, //몇단어부터 작동할껀지
		selectFirst: true, // 모름
		focus: function() { //포터스 자동 입력 제한
				// prevent value inserted on focus
				return false;
		},
		select: function( event, ui ) {
			$("#addr").val(ui.item.value);
			$("#zipcode").val(ui.item.id);
		}
	});
})