Example of typeahead:selected event

For anyone interested until an example is added to documentation for custom events…

Assuming there’s an input on your page called ‘search_input’:

$('#search_input').bind('typeahead:selected', function(obj, datum, name) {      
        alert(JSON.stringify(obj)); // object
        // outputs, e.g., {"type":"typeahead:selected","timeStamp":1371822938628,"jQuery19105037956037711017":true,"isTrigger":true,"namespace":"","namespace_re":null,"target":{"jQuery19105037956037711017":46},"delegateTarget":{"jQuery19105037956037711017":46},"currentTarget":
        alert(JSON.stringify(datum)); // contains datum value, tokens and custom fields
        // outputs, e.g., {"redirect_url":"http://localhost/test/topic/test_topic","image_url":"http://localhost/test/upload/images/t_FWnYhhqd.jpg","description":"A test description","value":"A test value","tokens":["A","test","value"]}
        // in this case I created custom fields called 'redirect_url', 'image_url', 'description'   

        alert(JSON.stringify(name)); // contains dataset name
        // outputs, e.g., "my_dataset"

});

https://github.com/twitter/typeahead.js#custom-events

[ZaneCEO]

I was banging my head against the wall so… please note that now the event is “typeahead:select” and NO LONGER “selected”… after this, the original example still works and is the correct way to do it, thanks!

[aaron-nunley]

@maanasa Give this a shot? Looks like you were binding to the input field itself rather than the typeahead object.

$('#field_id').typeahead({
  highlight: true
},
{
  name: 'first_dataset',
  displayKey: 'name',
  source: first_dataset.ttAdapter(),
  templates: {
    header: '<b>first_dataset</b><hr />'
  }
},
{
  name: 'second_dataset',
  displayKey: 'name',
  source: second_dataset.ttAdapter(),
  templates: {
    header: '<b>second_dataset</b><hr />'
  }
}).bind("typeahead:selected", function(obj, datum, name) {
console.log(obj, datum, name);
});