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?

Solution 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.

Solution 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

Solution 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.

Solution 4

If you only had 1 on the page you could try $('ul.typeahead li.active').data('value'); but you may have have issues if there's more than 1 on a page.

I wonder if there's a reason why the input value is not set?

Solution 5

$('#myselector').typeahead({
itemSelected:function(data,value,text){
   console.log(data)
    alert('value is'+value);
    alert('text is'+text);
},
//your other stuffs
});

You have to just pass itemSelected in the callback function and it will give you the selected item.

Hope this will work for you.

View more solutions

Comments

[T.S.]

I eventually figured out how to do this. You can do it in jQuery using this: $("ul.typeahead.dropdown-menu").find('li.active').data('valu‌​e');

[maxmc]

The important thing is to return the selection from the updater function. Otherwise the input field will be empty

[Ron E]

This only works if the user has actually selected an item. If I want the value currently highlighted, rather than selected, this will not work.

[Aysennoussi]

this is the official solution

[Rohit]

wonder why this answer is not marked correct .. though this is the perfect answer

[Steve]

@Rohit (and others commenting on why this isn't the selected answer) - Because the original question is about Bootstrap2 typeahead, and this answer is for the newer, standalone Twitter Typeahead, which was not yet available in 2012.

[Milos Ivanovic]

Please note that the event name was changed to typeahead:select in later versions.

[Latheesan]

This works, it should have been the accepted answer.

[bhu1st]

This worked for me inside blur event on the select box: $(this).parent().find("ul.typeahead li.active").data("value")

[Thato Sello]

@ymutlu I get undefined when I try to pass in datum.id. What can I do to access user id to make it a clickable link to the users show page?