bootstrap-typeahead.js add a listener on select event

I'm new to the Bootstrap Twitter framework, and I need to use bootstrap-typeahead.js for autocomplete but I need also to get the value selected by the user for the typeahead.

This is my code:

<input type="text" class="span3" style="margin: 0 auto;" 
                   data-provide="typeahead" data- items="4" 
                   data-source='["Alabama","Alaska"]'>

How can I add a listener to get the selected value from type typeahead and pass it in a function? For example when I use ExtJs, I apply this structure:

listeners: {
   select: function(value){
     ........
   }
}

How can I do something similar with a typeahead?

you should use "updater":

$('#search-box').typeahead({

    source: ["foo", "bar"],

    updater:function (item) {

        //item = selected item
        //do your stuff.

        //dont forget to return the item to reflect them into input
        return item;
    }
});

In v3 twitter bootstrap typeahead will be dropped an replaced with the twitter typeahead (which has the feature you want to and a lot more)

https://github.com/twitter/typeahead.js

usage like this:

jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) {
    console.log(datum);
});

you can use afterSelect

$('#someinput').typeahead({ 
    source: ['test1', 'test2'], 
    afterSelect: function (item) {
        // do what is needed with item
        //and then, for example ,focus on some other control
		$("#someelementID").focus();
	}
});

Thanks P.scheit for your answer. Let me just add this to your solution which handles autocompletion when user presses the tab key.

jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) {
    console.log(datum);
}).on('typeahead:autocompleted', function (e, datum) {
    console.log(datum);
});

I've been able to get this working by simply watching the "change" event on the element, which Twitter Bootstrap Typeahead fires on select.

var onChange = function(event) {
  console.log "Changed: " + event.target.value
};

$('input.typeahead').typeahead({ source: ['test1', 'test2'] });
$('input.typeahead').on('change', onChange);

Outputs 'Changed: test1' when the user selects test1.

NOTE: It also fires the event when the user presses "Enter" even if no match is found, so you have to decide if that's what you want. Especially, if the user enters "te" and then clicks "test1", you will get an event for "te" and an event for "test1", which you may want to debounce.

(Version 2.0.2 Twitter Bootstrap Typeahead)

Heres the solution with multi-event on for tabbed and selected:

$('#remote .typeahead').on(
    {
        'typeahead:selected': function(e, datum) {
            console.log(datum);
            console.log('selected');
        },
        'typeahead:autocompleted': function(e, datum) {
            console.log(datum);
            console.log('tabbed');
        }
});

Try this fork of typeahead. It gives you an onselect event, asynchronous population and more!

I had the same problem. You can use this function to make your custom events: https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed (to add more events you have to know typeahead prototype structure)

$('input.typeahead').typeahead({ 
    source: ['test1', 'test2'], 
    itemSelected: function(e){ 
        ---your code here---
    } 
});