Twitter Typeahead.js, `suggestionsRendered` event callback, how do I get the suggestions data?

Question

How can I hook into the suggestionsRendered event of Twitter's Typeahead and access the filtered data so I can update my table using this data?

I am using Twitter Bootstrap 3, this version has moved the typeahead plugin into its own library, and the old typeahead plugin is no longer being maintained.

I have setup typeahead to work as I would like, but I have an issue where I would like the library to fire a callback once suggestionsRendered has fired internally.

Attaching events via the normal fashion does not work, the only events currently available are located here: https://github.com/twitter/typeahead.js#custom-events

• typeahead:initialized (fired when the typeahead has loaded (and prefetched data))
• typeahead:opened (fired when the typeahead suggestion box opens)
• typeahead:closed (fired when the typeahead suggestion box closes)
• typeahead:selected (fired when a suggestion is selected)
• typeahead:autocompleted (fired on tab press, or whenever autocompleted)

You can use the above events like so:

// This is how you use the above events.
$searchTypeahead.on('typeahead:selected',function(evt,data){
    console.log('typeahead:selected');
    console.log(data); // Contains the selected items data
});

---

The Problem

As someone is typing in the input field, I want to update the rows inside a table, I can't use none of the above events to update a table as I type (They only work for clicks, selections, hovers etc..).

How can I retrieve the filtered data that suggestionsRendered renders? (So instead of rendering it into the typeahead box, I want to access all the items, so I can loop over them, and add them into a table).

I've tried googling (listed for SEO): (but find information related to the old (and unmaintained) version of typeahead)

twitter bootstrap 3 typeahead suggestionsRendered custom event
twitter bootstrap 3 typeahead suggestionRendered custom event
twitter bootstrap 3 typeahead suggestionsRendered callback
twitter bootstrap 3 typeahead suggestionsRendered get data callback

Finally.. I found a thread on github that states this feature has been requested and is waiting to be implemented (though this comment was from 10 months ago).

Answer 1

Currently this feature is waiting to be implemented (along with a bunch of other callbacks), I have found a simple solution (which requires editing the core typeahead.js library)

Step 1

Inside typeahead.js find the following line (approx Line: 840 in v0.9.3).

// Within Class DropdownView
renderSuggestions: function(dataset, suggestions) {
...
    this.trigger("suggestionsRendered"); // Find this line! approx line: 840
...
}

Step 2

Change the above line to:

renderSuggestions: function(dataset, suggestions) {
...
    this.trigger("suggestionsRendered", suggestions); // Pass "suggestions" var
...
}

Step 3

Finally in your HTML page (or Javascript file), use the following to attach the event:

// When you initialize your typeahead, store it into a variable
$typeahead = $('#your-typeahead-input-id-or-class').typeahead({options});

// Access that elements data property, and attach the event to dropdownView
$typeahead.data('ttView').dropdownView.on('suggestionsRendered', function (evtObj) {
    console.log(evtObj.type); // Holds the event type: "suggestionsRendered"
    console.log(evtObj.data); // Holds results of filtered data: Object
    console.log("suggestionsRendered event callback fired");
    // Do your stuffs..
});

---

Thats it!

If you log the evtObj var, you will have the event type AND data! :)

Answer 2

I believe this example for dealing with events is more relevant now: https://github.com/twitter/typeahead.js/issues/300