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

Question

使用自定义引导插件实现预输入功能 https://gist.github.com/1891669

如何为“选择”事件附加回调？以下代码不起作用。

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"}
    ];