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

我是Bootstrap Twitter框架的新手，我需要使用bootstrap-typeahead.js来自动完成，但是我还需要获取用户为typeaheadselect的值。

这是我的代码：

<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){ ........ } } 

我怎样才能做类似的事情？

Answer 1

试试键入这个前叉 。 它给你一个select事件，asynchronous人口和更多！

Answer 2

你应该使用“ 更新 ”：

 $('#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 3

在v3 twitter引导程序中，typeahead将被删除，并replace为twitter typeahead（它具有您想要的function以及更多）

twitter/typeahead.html

用法如下：

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

Answer 4

谢谢P.scheit的答案。 让我把这个添加到你的解决scheme，当用户按Tab键处理自动完成。

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

Answer 5

你可以使用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 6

我已经能够通过简单地观看元素上的“更改”事件来获得这个工作，Twitter上的Bootstrap Typeaheadselect了这个事件。

 var onChange = function(event) { console.log "Changed: " + event.target.value }; $('input.typeahead').typeahead({ source: ['test1', 'test2'] }); $('input.typeahead').on('change', onChange); 

当用户selecttest1时，输出'Changed：test1'。

注意：即使没有find匹配，当用户按下“Enter”时，它也会触发事件，所以您必须决定是否这是您想要的。 特别是，如果用户input“te”然后点击“test1”，你将得到一个“te”的事件和一个“test1”的事件，你可能想要去除。

（版本2.0.2 Twitter Bootstrap Typeahead）

Answer 7

下面是选项卡上的多事件解决scheme：

 $('#remote .typeahead').on( { 'typeahead:selected': function(e, datum) { console.log(datum); console.log('selected'); }, 'typeahead:autocompleted': function(e, datum) { console.log(datum); console.log('tabbed'); } }); 

Answer 8

我有同样的问题。 你可以使用这个函数来创build自定义事件： https : //github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed （添加更多事件你必须知道typeahead原型结构）

Answer 9

 $('input.typeahead').typeahead({ source: ['test1', 'test2'], itemSelected: function(e){ ---your code here--- } });