소개
인터넷 검색을 하면서 무심결에 사용하고 있는 기능이 있다. 바로 자동완성 기능이다. 검색어를 만드는 중 미리 연관 검색어를 가져와서 완성을 돕는다. 개발 단계에서 단골손님으로 등장하는 요구 사항이다.
해당 기능을 위한 라이브러리를 공유 한다.
위 그림은 유사한 라이브러리인 jQuery autocomplete 와 typeahead 의 관심도 통계 이다. 구글 트랜드를 사용하였다. 사용량은 증가하는 추세 이다.
2가지의 라이브러리로 구성 되어 있다.
- bloodhound.js (standalone suggestion engine)
- typeahead.jquery.js (standalone UI view)
검색을 담당하는 bloodhound.js 와, 이벤트 처리를 담당하는 typeahead.jquery.js 로 구성 되어 있다. 실제 라이브러리를 사용할 때에는 bundle 버전을 사용 한다. 두 가지 기능을 포함하고 있다.
브라우저 지원 여부
| Chrome |
Firefox |
Safari |
Internet Explorer |
Opera |
| ALL |
3.5+ |
4+ |
8+ |
11+ |
라이브러리 사용에 앞서 지원 브라우저 확인은 필요 하다. 프로젝트 정책에 맞지 않는 브라우저가 있는 경우, 울며 겨자먹기로 개발하는 경우가 생길 수 있기 때문 이다.
특징
자동완성 시 시점마다 이벤트가 구현되어 있어, 개발이 편리 하다.
- typeahead:open ( 검색 창 열림 )
- typeahead:rendered ( 검색 결과 생성 )
- typeahead:cursorchanged ( 위 아래 커서 이동 )
- typeahead:selected ( 선택 )
- typeahead:autocompleted ( 검색어 자동완성 Tab 키 )
사용 예제
See the Pen typeahead sample by min chul park (@whitelife) on CodePen.
참고 사이트