Question

使用自定义引导程序插件进行预先输入功能 https://gist.github.com/1891669

如何附加'select'事件的回调？以下代码不起作用。

var selectedFn = $('.typeahead dropdown-menu').on('select', function( ev ){
    console.log(ev);
});

有人能解释一下这是如何运作的吗？

Answer 1

这样做的一种新方法是：

$('.input').typeahead({ 
    // snip
}).on('typeahead:selected', function() {
    // on selected
});

Answer 2

$('#myselector').typeahead({
itemSelected:function(data,value,text){
   console.log(data)
    alert('value is'+value);
    alert('text is'+text);
},
//your other stuffs
});

您必须在回调函数中传递itemSelected，它将为您提供所选项目。

希望这对你有用。

Answer 3

您可以像这样听取输入更改事件：

$('input.typeahead').on('change', function () { ... })

Answer 4

在函数中指定处理事件的参数，以便按照https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#custom-events

中的文档中的建议选择值

.on('typeahead:select', function(ev,value) {
        //value = the selected object
        //e.g.: {State: "South Dakota", Capital: "Pierre"}
    })

它给出了与typeahead完全相同的结果：select而不是typeahead：selected。我宁愿选择记录的那个。

Answer 5

$('.typeaheadGroupSelect').typeahead({ 
    // snip
}).on('typeahead:selected', function(data, value, text) {
    // on selected
    console.log(data);
    console.log(value.idPublic); // here you can access all json object by using value.key
    console.log(value.name);
});

我使用上面的代码片段访问了所选内容中的数据，并将某些隐藏值分配给另一个输入。

我之前在数据源中添加了一个用于提前查询数据的对象，如下所示：

var jsonData = [
        {"id":"1","idPublic":"978343HFJ","name":"Volkswagen Group Sales International"},
        {"id":"2","idPublic":"8343JJR98","name":"BMW Group Sales APAC"},
        {"id":"3","idPublic":"935723JFF","name":"Jaguar Group Sales Asia"},
        {"id":"4","idPublic":"3243JFUFF","name":"Mercedes Benz Group Sales Europe"}
    ];

如何将回调附加到Bootstrap Typeahead插件

5 个答案: