76

As you know Bootstrap RC 1 is here, and I have been reading about all the new awesome features in this new framework. But guess what, typehead is out of the documentation. Does anyone know if this is for any reason?

I found these examples while googling and also I read in this post that they changed the typehead Bootstrap. So do I have to add it manually or is it also in the Bootstrap 3 bundle?

Does anyone know something about this?

Termininja
  • 6,620
  • 12
  • 48
  • 49
ncubica
  • 8,169
  • 9
  • 54
  • 72
  • 2
    I also found too many things gone such as nav classes, typeahead,controlled form input widths, search box, submenus. Changing classes to make it complex such as icon- to .glyphicon, span to col-lg-xxxxx? I would credit jquery in that regard or google policy I mean give enough backward compatibility so that people can stick to your product. Rather than imposing your idea just on others and judge in these words "We think that is not needed" Who are you to judge. So this change policy is more Microsoft stuff. They keep changing things and we developers always keep learning and wasting time. HELL! – Asif Ashraf Sep 08 '13 at 23:35
  • 1
    someone has added back the typeahead to Bootstrap 3 [here](https://github.com/bassjobsen/Bootstrap-3-Typeahead) – MK Yung Dec 20 '13 at 04:48
  • This works with old bootstrap2 code without nodification. Just include the extra js file after the bootstrap 3 load. – giorgio Jan 10 '14 at 02:36
  • This solved my problems with http://timschlechter.github.io/bootstrap-tagsinput/examples/ Thanks! – Lucia Jan 18 '14 at 22:09

5 Answers5

67

I believe it has been deprecated in favor of Twitter's excellent typeahead.js. Their documentation has a Bootstrap integration section that should help.

edit: Twitter has removed the integration instructions. It's not clear if this is temporary in advance of a Bootstrap 3.0-compatible release or if it's gone for good, but @drye links to a useful replacement at http://www.aureliomerenda.com/install-typeahead-bootstrap-3-fix-css-overlay-width-100/.

ceejayoz
  • 176,543
  • 40
  • 303
  • 368
  • 3
    Here the official deprecation notice: http://getbootstrap.com/getting-started/#migration-notes – Jesús Carrera Sep 27 '13 at 17:15
  • 3
    **Warning**: as of Oct 24 2013, typeahead.js has been stale for 3-4 months. Hope they can get it going again. https://github.com/twitter/typeahead.js/issues/489 – Breiz Oct 24 '13 at 13:40
  • A real true shame, since Twitters typeahead is never going to be updated. More than 160+ uncommented/unsolved issues, and still going. – FooBar Oct 29 '13 at 10:41
  • 3
    @JakeHarding will release a new version in early January. – NicoJuicy Dec 11 '13 at 20:55
  • 1
    The integration section has been removed: https://github.com/twitter/typeahead.js/commit/331cff944d00f1d8e98694fc6f73ab80455bd3be Some instructions here: http://www.aureliomerenda.com/install-typeahead-bootstrap-3-fix-css-overlay-width-100/ – drye Jan 29 '14 at 22:59
  • @drye Thanks, how weird that they got rid of it. – ceejayoz Jan 30 '14 at 03:45
  • 1
    The method here: http://www.aureliomerenda.com/install-typeahead-bootstrap-3-fix-css-overlay-width-100/ no longer works – Cam Tullos Mar 30 '14 at 09:38
14

Now that the final Bootstrap 3.0.0 has been released, the typeahead has been officially removed. However, Twitter's Typeahead (https://github.com/twitter/typeahead.js) can be used in it's place:

Bootstrap 3 Typeahead example: http://bootply.com/86571

ControlAltDel
  • 33,923
  • 10
  • 53
  • 80
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
9

As ceejayoz already stated, you need the typeahead.js + the additional CSS for integrate with Bootstrap.

This is made for Bootstrap 2.

If you want it to work with Bootstrap 3, you have to change the .tt-hint class. I changed it to display: none; because it overlayed very terrible.

I also noticed that Button addons (to inputs) don't work that well because the input gets not correctly overridden too.

Daniel W.
  • 31,164
  • 13
  • 93
  • 151
  • 1
    This post was helpful. that .tt-hint is strange popup with duplicate text from input control. Don't know what it was there. Setting display:none really helped out. thanks – Asif Ashraf Sep 09 '13 at 06:03
9

I found the adaption [may 2014] ;)

for others landing here from google like I did, still searching for the right answer: https://github.com/bassjobsen/Bootstrap-3-Typeahead

and if you need it working with knockout 3 like I do, I adapted the code from the genius Niemeyer ( https://stackoverflow.com/a/20503173/1218136 ) minimally to work again:

<input type="text" data-bind="value: value, typeahead: {source: your_array}" />
Community
  • 1
  • 1
Nukey
  • 326
  • 3
  • 10
7

Yes, typeahead is deprecated in Bootstrap 3.

But typeahead.js is not ready for Bootstrap 3.

The working solution is to add the additional css, which repairs the css problems: https://github.com/jharding/typeahead.js-bootstrap.css

optimister
  • 101
  • 1
  • 1
  • 3
    Works. I use tagManager, typeahead, bootstrap 3. Plus use .twitter-typeahead .tt-hint css class from Nick P answer http://stackoverflow.com/questions/18059161/css-issue-on-twitter-typeahead-with-bootstrap-3 – MorioBoncz Oct 27 '13 at 21:51