Handle selected event in twitter bootstrap Typeahe

2020-06-30 11:46发布

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

I search about some thing like selected event.

7条回答
干净又极端
2楼-- · 2020-06-30 12:07
$('.typeahead').on('typeahead:selected', function(evt, item) {
    // do what you want with the item here
})
查看更多
趁早两清
3楼-- · 2020-06-30 12:07

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
})
查看更多
forever°为你锁心
4楼-- · 2020-06-30 12:12

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.
查看更多
Bombasti
5楼-- · 2020-06-30 12:17

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);
});
查看更多
【Aperson】
6楼-- · 2020-06-30 12:23
$('.typeahead').typeahead({
    updater: function(item) {
        // do what you want with the item here
        return item;
    }
})
查看更多
混吃等死
7楼-- · 2020-06-30 12:24

I created an extension that includes that feature.

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

查看更多
登录 后发表回答