jQuery-bootstrap-typeahead.js在选择甚至添加一个侦听器

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

我该如何做类似的事?

9个解决方案
166 votes

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

$('#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;
    }
});
Capy answered 2020-01-14T04:46:07Z
56 votes

在第3版中,twitter bootstrap typeahead将被替换为twitter typeahead(具有您想要的功能以及更多功能)

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

用法如下:

jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) {
    console.log(datum);
});
pscheit answered 2020-01-14T04:46:35Z
19 votes

您可以使用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();
    }
});
ahmad molaie answered 2020-01-14T04:46:55Z
18 votes

感谢P.scheit的回答。 让我将其添加到您的解决方案中,该解决方案可以在用户按下Tab键时处理自动填充。

jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) {
    console.log(datum);
}).on('typeahead:autocompleted', function (e, datum) {
    console.log(datum);
});
philippinedev answered 2020-01-14T04:47:15Z
5 votes

我已经可以通过简单地查看元素上的“ change”事件来使此工作正常进行,该事件在选择时会触发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时,输出'Changed:test1'。

注意:即使没有找到匹配项,当用户按下“ Enter”键时,它也会触发事件,因此您必须确定这是否是您想要的。 特别是,如果用户输入“ te”,然后单击“ test1”,您将获得一个“ te”事件和一个“ test1”事件,您可能希望对其进行反跳。

(版本2.0.2 Twitter Bootstrap提前输入)

Hollownest answered 2020-01-14T04:47:49Z
3 votes

以下是针对选项卡式和选中式的具有多个事件的解决方案:

$('#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');
        }
});
Abs answered 2020-01-14T04:48:08Z
0 votes

我有同样的问题。 您可以使用此函数进行自定义事件:[https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed](要添加更多事件,您必须知道提前原型结构)

user968167 answered 2020-01-14T04:48:29Z
0 votes
$('input.typeahead').typeahead({ 
    source: ['test1', 'test2'], 
    itemSelected: function(e){ 
        ---your code here---
    } 
});
Konstantin Panfilov answered 2020-01-14T04:48:44Z
-1 votes

尝试这种预付叉。 它为您提供了一个onselect事件,异步填充等等!

Pezholio answered 2020-01-14T04:45:47Z
translate from https://stackoverflow.com:/questions/9496314/bootstrap-typeahead-js-add-a-listener-on-select-event