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

您应该使用“更新程序”：

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

感谢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 4

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

启用多事件的解决方案，用于选项卡和选中：

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

我遇到了同样的问题。您可以使用此功能制作自定义活动：https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed （添加更多事件，你必须知道先行原型结构）

Answer 8

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

Answer 9

试试this fork of typeahead。它为您提供了一个onselect事件，异步人口等等！

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

9 个答案: