Bootstrap-typeahead.js adds a listener to the select event

Question

I am new to Twitter's Bootstrap platform and I need to use bootstrap-typeahead.js to autocomplete, but I also need to get the value the user selected for 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 to add a listener to get the selected value from typeahead type and pass it to functions? For example, when I use ExtJs, I apply this structure:

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

How can I do something like this with typeahead?

Answer 1

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

Answer 2

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; } }); 

Answer 3

In v3 twitter bootstrap typeahead will be dropped to replace twitter with typeahead (which has the function you want and more)

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

:

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

Answer 4

Thanks P.scheit for your answer. Let me add this to your solution that handles autocomplete when the 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); }); 

Answer 5

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(); } }); 

Answer 6

I managed to get this working by simply looking at the "change" event on the element that Bootstrap Typeahead clicks on selection.

 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 an event when the user presses Enter, even if no match is found, so you need to decide what you want. In particular, if the user enters "te" and then presses "test1", you will get an event for "te" and an event for "test1", which you might want to cancel.

(Version 2.0.2 of Twitter Bootstrap Typeahead)

Answer 7

Here we use a solution with several events for tabs and selected ones:

 $('#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'); } }); 

Answer 8

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

Answer 9

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