CODEWITHSUNDEEP
jqueryjquery-uitwitter-bootstrap
jack.cap.rooney
jack.cap.rooney

Reputation: 1306

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?

Upvotes: 52

Views: 91944

Answers (9)

Abs
Abs

Reputation: 3962

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

Upvotes: 2

ahmad molaie
ahmad molaie

Reputation: 1540

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

Upvotes: 19

Konstantin Panfilov
Konstantin Panfilov

Reputation: 1

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

Upvotes: -1

pscheit
pscheit

Reputation: 2981

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

Upvotes: 55

philippinedev
philippinedev

Reputation: 1220

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

Upvotes: 17

user968167
user968167

Reputation: 27

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)

Upvotes: -1

Hollownest
Hollownest

Reputation: 1067

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)

Upvotes: 4

Capy
Capy

Reputation: 5267

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

Upvotes: 168

Pezholio
Pezholio

Reputation: 2674

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

Upvotes: -1

Related Questions