Get selected items value for Bootstrap's typeahead

Question

Bootstrap just implemented a neat autocomplete feature called typeahead. I am having trouble getting the appropriate value for the text input.

For instance, I might have the following:

$('input').on('change', function(){
    console.log($(this).val());
});

This does not appear to capture the selected value. Does anyone know how to get the selected value using typeahead with Bootstrap?

Answer 1

$('#autocomplete').on('typeahead:selected', function (e, datum) {
    console.log(datum);
});
$('#autocomplete').on('typeahead:cursorchanged', function (e, datum) {
    console.log(datum);
});

Seems Typeahead changed listeners and usages are not well documented. You can use these listeners.

UPDATE

Event name was changed to typeahead:select in later versions.

Answer 2

You're looking at it from the wrong angle. Bootstrap's typeahead method provides an option which allows you to pass a callback function that receives the selected value as the argument. Below is a condensed example illustrating just this one argument.

$('#typeaheadID').typeahead({
    updater: function(selection){
        console.log("You selected: " + selection)
    }
})

cheers! documentation refernece

Answer 3

I'm working with this and I'm having the same issue right now. I'm planning to solve it with this pretty fork

https://gist.github.com/1891669

And I did it with a callback:

  $('.typeahead').typeahead({
    // note that "value" is the default setting for the property option
    source: [{value: 'Charlie'}, {value: 'Gudbergur'}, ...],
    onselect: function(obj) { console.log(obj) }
  })

Hope it helps you too.