자동검색 완성 기능을 지원하는 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 키 )

사용 예제

See the Pen typeahead sample by min chul park (@whitelife) on CodePen.

참고 사이트


신고
Designed by CMSFactory.NET