typeahead.js의 몇 가지 작업 예제를 보려면 예제 페이지를 방문하십시오. bassjobsen / 부트 스트랩 -3-Typeahead의 새로운 릴리스에 대한 알림을 원하십니까? 이 자습서에서는 Laravel 및 Typeahead를 사용하여 스마트 검색을 구현했습니다. 멋진 라이브러리 덕분에 : Typeahead, 그리고 멋진 프레임 워크 : 라라벨,이 모든 것을 훨씬 쉽게 만들기위한. 다음 예제에서는 자바스크립트의 단일 조각을 직접 작성하지 않고 typeaheads를 만드는 방법을 보여 주며 유일한 태그가 작업을 수행합니다. Typeahead.js 는 현재 새로운 트위터 부트 스트랩 3에 대한 준비가되지 않은 것 같습니다. 코드가 최신 상태이지 않으며 수정이 필요합니다. 참조: 부트스트랩 3.0 RC1의 유형 전방 문제. typeahead.js 라이브러리는 제안 엔진, 블러드하운드 및 UI 보기인 Typeahead의 2개의 구성 요소로 구성됩니다. 제안 엔진은 지정된 쿼리에 대한 제안을 계산합니다. UI 보기는 제안을 렌더링하고 DOM 상호 작용을 처리합니다. 두 구성 요소를 별도로 사용할 수 있지만 함께 사용하면 풍부한 형식 환경을 제공할 수 있습니다. 블러드하운드는 버전 0.10.0 이후, typeahead.js 제안 엔진입니다.

블러드하운드는 견고하고 유연하며 프리페칭, 지능형 캐싱, 빠른 조회 및 원격 데이터로 채우기와 같은 고급 기능을 제공합니다. 부트스트랩-3-Typeahead와 블러드하운드를 사용하려면: 위의 예와 같이 typeahead 기능을 가진 요소를 등록하기 위해 데이터 속성을 추가합니다. URL 값에 명시된 대로 아직 경로를 설정하지 는 않았지만 나중에 그렇게 할 것입니다. datumTokenizer는 JSON의 배열이 필요합니다.이 예제에서는 `q`입니다. Typeahead를 사용하면 템플릿을 사용하여 제안의 스타일을 수정할 수 있습니다. 부트스트랩에서 가져온 것처럼 스타일 지정에 목록 그룹 클래스를 사용할 수 있습니다. 부트 스트랩에 대 한 AngularJS 지시문 3 Typeahead jQuery 플러그인에서 찾을 수 있습니다 https://github.com/davidkonrad/angular-bootstrap3-typeahead. 사용자 지정 템플릿 및 표시: 여기에서 작업 모의 작업을 확인하려면 http://jsfiddle.net/w03a28h9/40 시작하려면 Typeahead.js를 가져와야 합니다.

다음 방법 중 한 가지를 사용하여 Typeahead를 설치할 수 있습니다. 부트 스트랩 4 곧 오고있다. 부트스트랩 3 Typeahead는 부트스트랩 4와도 함께 작동합니다. 부트 스트랩 4의 모양과 느낌은 부트 스트랩 3과 다를 수 있으며 드롭 다운 메뉴도 마찬가지입니다. 부트 스트랩 4에서 타이프 어사이드 드롭 다운 메뉴는 아래 그림과 같습니다. Typeahead.js는 강력한 검색 자동 완성을 구축하기 위한 강력한 기반을 제공하는 유연한 JavaScript 라이브러리입니다. 이 라이브러리는 두 가지 구성 요소로 구성됩니다: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/40 Typeahead https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js A 형기전에는 많은 데이터 집합이 있을 수 있습니다. 페이스 북 검색의 예를 들어 보겠습니다. 무언가를 입력하면 사용자, 그룹, 페이지, 게임 등과 같은 그룹에서 많은 제안을 반환합니다. 여기서는 서버의 데이터 집합으로만 사용자를 반환합니다. 제안 엔진은 지정된 쿼리에 대한 제안을 계산하고 UI 뷰는 이를 렌더링합니다.