Question

我想在用户选择值后使用 twitter bootstrap Typeahead

运行javascript函数

我搜索一些像选定的事件

Answer 1

$('.typeahead').on('typeahead:selected', function(evt, item) {
    // do what you want with the item here
})

Answer 2

$('.typeahead').typeahead({
    updater: function(item) {
        // do what you want with the item here
        return item;
    }
})

Answer 3

有关typeahead适用于您想要执行的操作的解释，请参考以下代码示例：

HTML输入字段：

<input type="text" id="my-input-field" value="" />

JavaScript代码块：

$('#my-input-field').typeahead({
    source: function (query, process) {
        return $.get('json-page.json', { query: query }, function (data) {
            return process(data.options);
        });
    },
    updater: function(item) {
        myOwnFunction(item);
        var $fld = $('#my-input-field');
        return item;
    }
})

说明：

您的输入字段设置为具有第一行的预先输入字段：$('#my-input-field').typeahead(
当输入文本时，它会触发source:选项以获取JSON列表并将其显示给用户。
如果用户单击某个项目（或使用光标键选择并输入），则会运行updater:选项。 请注意，它尚未使用所选值更新文本字段。
您可以使用item变量获取所选项目，并使用它执行所需操作，例如myOwnFunction(item)。
我已经包含了一个创建对输入字段本身$fld的引用的示例，以防您想要对其执行某些操作。 请注意，您无法使用$（this）来引用该字段。
您必须然后在return item;选项中加入updater:行，以便输入字段实际使用item变量进行更新。

Answer 4

我第一次在这里发布了答案（很多时候我在这里找到了答案），所以这是我的贡献，希望它有所帮助。你应该能够发现一个变化 - 试试这个：

function bob(result) {
    alert('hi bob, you typed: '+ result);
}

$('#myTypeAhead').change(function(){
    var result = $(this).val()
    //call your function here
    bob(result);
});

Answer 5

我创建了一个包含该功能的扩展程序。

https://github.com/tcrosen/twitter-bootstrap-typeahead

Answer 6

根据他们的documentation，处理selected事件的正确方法是使用此事件处理程序：

$('#selector').on('typeahead:select', function(evt, item) {
    console.log(evt)
    console.log(item)
    // Your Code Here
})

Answer 7

source:  function (query, process) {
    return $.get(
        url, 
        { query: query }, 
        function (data) {
            limit: 10,
            data = $.parseJSON(data);
            return process(data);
        }
    );
},
afterSelect: function(item) {
    $("#divId").val(item.id);
    $("#divId").val(item.name);

}

在twitter bootstrap Typeahead处理选定的事件？

7 个答案: