bootstrap-typeahead.js在select事件上添加一个监听器

Question

我是Bootstrap Twitter框架的新手,我需要使用bootstrap-typeahead.js进行自动完成,但我还需要获取用户为typeahead选择的值.

这是我的代码:

<input type="text" class="span3" style="margin: 0 auto;" 
                   data-provide="typeahead" data- items="4" 
                   data-source='["Alabama","Alaska"]'>

如何添加一个侦听器以从typeahead类型中获取所选值并将其传递给函数？例如,当我使用ExtJs时,我应用此结构:

listeners: {
   select: function(value){
     ........
   }
}

如何使用typeahead做类似的事情？

Answer 1

你应该使用" 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;
    }
});

Answer 2

在v3中,twitter bootstrap typeahead将被替换为twitter typeahead(具有你想要的功能和更多功能)

https://github.com/twitter/typeahead.js

这样的用法:

jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) {
    console.log(datum);
});

Answer 3

您可以使用 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();
    }
});

Answer 4

感谢P.scheit的回答.让我将此添加到您的解决方案中,该解决方案在用户按Tab键时处理自动完成.

jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) {
    console.log(datum);
}).on('typeahead:autocompleted', function (e, datum) {
    console.log(datum);
});

Answer 5

我已经能够通过简单地观察元素上的"更改"事件来实现这一点,Twitter Bootstrap Typeahead在选择时触发.

var onChange = function(event) {
  console.log "Changed: " + event.target.value
};

$('input.typeahead').typeahead({ source: ['test1', 'test2'] });
$('input.typeahead').on('change', onChange);

当用户选择test1时,输出'已更改:test1'.

注意:即使没有找到匹配项,当用户按下"Enter"时,它也会触发事件,因此您必须确定这是否是您想要的.特别是,如果用户输入"te"然后单击"test1",您将获得"te"事件和"test1"事件,您可能想要去抖动.

(版本2.0.2 Twitter Bootstrap Typeahead)

Answer 6

试试这个 typeahead 分支。它为您提供 onselect 事件、异步填充等等！