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?

Desilva

At the risk of shameless self promotion, I added functionality to that plugin because I found it too primitive for real-world scenarios (using complex JSON sources, performing an action when an item is selected.) You can see it here and at the very least you may understand how to manipulate the results. – Arakawa

https://mcmap.net/q/341927/-bootstrap-typeahead-js-add-a-listener-on-select-event – Hunnish

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.

Englishman

this is the official solution – Cyperaceous

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

@Kris (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. – Assamese

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

@Englishman 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? – Headwaters

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

Benjamin

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

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. – Nucleon

This works, it should have been the accepted answer. – Proprietress

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.

Gloriagloriana

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

Answer 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?

Machado

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

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

Fireworm

Answer 6

If you are using another button to work with selected item or you need to get this item outside selection callback you can use $("#your_input").next("ul").find("li.active").data("value"); to get your value.

Working for ajax bootstrap typeahead.

Downright

This is great, because it can return the full object in case you are displaying only one variable in the input field. – Summary