Handle selected event in twitter bootstrap Typeahead?

问题

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

I search about some thing like selected event.

回答1:

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

回答2:

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

回答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, e.g. 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 must then include the line return item; within the updater: option so the input field is actually updated with the item variable.

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

回答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
})

回答6:

I created an extension that includes that feature.

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

回答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);

}

来源：https://stackoverflow.com/questions/9547728/handle-selected-event-in-twitter-bootstrap-typeahead