Handle selected event in twitter bootstrap Typeahe

2020-06-30 12:04发布


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

I search about some thing like selected event.


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


    updater: function(item) {
        // do what you want with the item here
        return item;


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:

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


  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.


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

    var result = $(this).val()
    //call your function here


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

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


I created an extension that includes that feature.



source:  function (query, process) {
    return $.get(
        { query: query }, 
        function (data) {
            limit: 10,
            data = $.parseJSON(data);
            return process(data);
afterSelect: function(item) {