How can I use typeahead.js with bootstrap 3?

twitter-bootstrap-3 typeahead

Vihung · Mar 10, 2014 · Viewed 9.2k times · Source

I am putting together a prototype application for a demonstration, and am using Twitter Bootstrap 3 (http://getbootstrap.com - specifically version 3.1.1). I would like to use typeahead.js (http://twitter.github.io/typeahead.js/ - currently version 0.10.1) to drive search suggestions.

I have seen a few examples for previous versions, but none that seem relevant to the latest versions.

What is the best way to integrate the two?

Based on the few examples I have seen, this is what I am trying to do

<input type="text" class="typeahead form-control input-sm" id="searchField1"/>

and then

$(document).ready(function() {
  $('#searchField1').typeahead({
    name: 'keywords',
    local: ['foo', 'bar']
  });
});

However, I think things have moved on

Answer

The twitter.github.io/typeahead.js not compatible with bootstrap 3.

You can use this Typeahead which is compatible with twitter bootstrap 3

https://github.com/bassjobsen/Bootstrap-3-Typeahead

Actually the developer migrated bootstrap 2 code in to bootstrap 3 here is the details http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

How can I use typeahead.js with bootstrap 3?

Answer

Related questions