[JavaScript] jQuery - 검색어 자동완성(Autocomplete) 오류 | 자동 선택되는 현상

검색창에 jQuery로 Autocomplete 기능을 구현했을 때 제시된 첫 번째 완성 검색어가 자동으로 선택되는 현상이 발생할 수 있다.

 

예를 들어, 자동완성을 제공할 배열에 '삼성전자', '삼성전기', '삼성물산' 등이 있다면 '삼성'이라는 문자를 입력하면 그 아래로 삼성전자, 삼성전기, 삼성물산 등이 자동완성 옵션을 제공할 것이다. 이때 이용자는 위아래 화살표로 자유롭게 자동 완성된 리스트 중 하나를 골라 enter키로 검색창에 완성될 문자를 확정할 수 있다.

 

그러나 자동완성 이후 ↓ 화살표를 누르자마자 첫번째 자리에 있는 자동완성 검색어가 enter로 선택된 것처럼 자동 선택되는 오류가 발생하는 경우가 있다.

 

이는 배열의 문자열이 한국어로 구성됐을 때 생기는 오류로 파악된다. 해결법은 focus 이벤트를 return false;처리해주는 것이다.

$(function() {
   var myArr = ['삼성전자', '삼성전기', '삼성물산', '삼성전자로지텍'];

    $('#searchBar').autocomplete({ 
        source : myArr,
        minLength: 1,
        select : function(event, ui) {
             $(this).val(ui.item.value);
        },
        focus : function(event, ui) {
            return false;
        }
    });
});