Twitter Typeahead

Since Bootstrap dropped support for their typeahead they have since told people to use Twitter's typeahead.js.  It has a lot of great features that I have covered in an older write up about Twitter Typeahead.js.  In this post I wanted to go over the custom events that are triggered and how you can use them to get more out of Twitter Typehead. There are five triggers in the typeahead.js and you can tap into each of these to do what you'd like when these events are triggered.  Below are those events and when they are triggered. • typeahead:initialized – Triggered after initialization. If data needs to be prefetched, this event will not be triggered until after the prefetched data is processed. • typeahead:opened – Triggered when the dropdown menu of a typeahead is opened. • typeahead:closed – Triggered when the dropdown menu of a typeahead is closed. • typeahead:selected – Triggered when a suggestion from the dropdown menu is explicitly selected. The datum for the selected sug...

Twitter Typeahead.js has been updated and there are a lot of changes.  I'm going to give a an explanation for a few of their examples and explain the key features and changes that they have made.  For those looking to upgrade to this new version it will require a rewrite of your current Typeahead.js methods so please be aware of that.  The biggest changes are outlined in their changelog.“The most important change in 0.10.0 is that typeahead.js was broken up into 2 individual components: Bloodhound and jQuery#typeahead. Bloodhound is an feature-rich suggestion engine. jQuery#typeahead is a jQuery plugin that turns input controls into typeaheads.” Let's head to the examples.// instantiate the bloodhound suggestion engine var numbers = new Bloodhound({ datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); }, queryTokenizer: Bloodhound.tokenizers.whitespace, local: [ { num: 'one' }, { num: 'two' }, { num: 'three' }, { num: 'four' }, { ...

New Version - Twitter Typehead.js v0.10 Bootstrap dropped support for their bootstrap-typeahead.js and suggested we all use Twitter's Typeahead.js.  This was a pretty big change for us and we encountered a bit of a learning curve because the documentation wasn't exactly what we had hoped it would be.  Typeahead.js is incredible and can do some amazing things though and we are happy to be using it. The first issue is that right out of the box it will not work with Bootstrap 3.  Support is still being looked at but in the mean time there are some fixes.  Here is a thread about the issue on their GitHub page with some helpful people posting solutions for the interim.  Below is the code we are using for ours which I'm sure will change in the coming days.//Twitter Typeahead CSS //Updated 22 August 2013 .twitter-typeahead { width: 100%; position: relative; } .twitter-typeahead .tt-query, .twitter-typeahead .tt-hint { margin-bottom: 0; wid...