jquery autocomplete selectFirst, minLength

이전 포스팅에서 autocomplete의 사용법에 대해서 간단히 포스팅 했었죠.

autocomplete을 조금 더 잘 사용할 수 있는 몇가지 옵션을 살펴볼게요.

 

우선 selectFirst입니다.

이것은 검색한 데이터를 화면에 출력해줄 때 첫번째 아이템이 선택되어 지도록 처리해 줍니다.

 

두번째로 minLength입니다.

이것은 텍스트박스에 몇글자가 입력이 되면 데이터를 검색할지 처리 하는 부분입니다. 즉 minLength:3 이라고 주게 되면 3글자가 입력 되기 전까지는 데이터를 검색하지 않는 거죠.

 

사용법은 아래와 같아요.

 

Code Snippet

1. $('#test').autocomplete({
2.     source: availableTags,
3.     select: function (event, ui) {
4.         //아이템 선택시 처리 코드
5.     },
6.     selectFirst: true,
7.     minLength: 4,
8.     open: function () {
9.         $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
10.     },
11.     close: function () {
12.         $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
13.     }
14. });

 

아참, selectFirst는 기본 false로 되어 있으니 사용안할 경우는 그냥 삭제 하시면 되고 minLength도 기본 1이니 무조건 출력을 원하면 없애주시면 됩니다.

 

그럼 즐프요~^^