자동검색 완성 기능을 지원하는 typeahead 라이브러리 사용하기

소개

인터넷 검색을 하면서 무심결에 사용하고 있는 기능이 있다. 바로 자동완성 기능이다. 검색어를 만드는 중 미리 연관 검색어를 가져와서 완성을 돕는다. 개발 단계에서 단골손님으로 등장하는 요구 사항이다.

해당 기능을 위한 라이브러리를 공유 한다.

위 그림은 유사한 라이브러리인 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 키 )

사용 예제

참고 사이트

• https://www.google.com/trends/explore#q=jquery%20autocomplete%2Ctypeahead
• https://github.com/twitter/typeahead.js
• http://twitter.github.io/typeahead.js/examples/