Handle selected event in twitter bootstrap Typeahead?

Question

I want to run Javascript function just after user select a value using twitter bootstrap Typeahead .

I search about some thing like selected event.

Answer 1

$('.typeahead').on('typeahead:selected', function(evt, item) {
    // do what you want with the item here
})

Answer 2

$('.typeahead').typeahead({
    updater: function(item) {
        // do what you want with the item here
        return item;
    }
})

Answer 3

For an explanation of the way typeahead works for what you want to do here, taking the following code example:

HTML input field:

<input type="text" id="my-input-field" value="" />

JavaScript code block:

$('#my-input-field').typeahead({
    source: function (query, process) {
        return $.get('json-page.json', { query: query }, function (data) {
            return process(data.options);
        });
    },
    updater: function(item) {
        myOwnFunction(item);
        var $fld = $('#my-input-field');
        return item;
    }
})

Explanation:

1. Your input field is set as a typeahead field with the first line: $('#my-input-field').typeahead(
2. When text is entered, it fires the source: option to fetch the JSON list and display it to the user.
3. If a user clicks an item (or selects it with the cursor keys and enter), it then runs the updater: option. Note that it hasn't yet updated the text field with the selected value .
4. You can grab the selected item using the item variable and do what you want with it, eg myOwnFunction(item) .
5. I've included an example of creating a reference to the input field itself $fld , in case you want to do something with it. Note that you can't reference the field using $(this) .
6. You then include the line return item; 包括行return item; within the updater: option so the input field is actually updated with the item variable.

Answer 4

first time i've posted an answer on here (plenty of times I've found an answer here though), so here's my contribution, hope it helps. You should be able to detect a change - try this:

function bob(result) {
    alert('hi bob, you typed: '+ result);
}

$('#myTypeAhead').change(function(){
    var result = $(this).val()
    //call your function here
    bob(result);
});

Answer 5

According to their documentation , the proper way of handling selected event is by using this event handler:

$('#selector').on('typeahead:select', function(evt, item) {
    console.log(evt)
    console.log(item)
    // Your Code Here
})

Answer 6

I created an extension that includes that feature.

https://github.com/tcrosen/twitter-bootstrap-typeahead

Answer 7

source:  function (query, process) {
    return $.get(
        url, 
        { query: query }, 
        function (data) {
            limit: 10,
            data = $.parseJSON(data);
            return process(data);
        }
    );
},
afterSelect: function(item) {
    $("#divId").val(item.id);
    $("#divId").val(item.name);

}

Answer 8

What worked for me is below:

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

The solution was taken from https://www.py4u.net/discuss/907420