获取 Bootstrap 的 typeahead 的选定项目值答案

【问题标题】：Get selected items value for Bootstrap's typeahead获取 Bootstrap 的 typeahead 的选定项目值
【发布时间】：2012-03-16 14:18:57
【问题描述】：

Bootstrap 刚刚实现了一个名为 typeahead 的简洁的自动完成功能。我无法为文本输入获取适当的值。

例如，我可能有以下情况：

$('input').on('change', function(){
    console.log($(this).val());
});

这似乎没有捕获所选值。有谁知道如何通过 Bootstrap 使用 typeahead 来获取选定的值？

【问题讨论】：

冒着无耻自我推销的风险，我向该插件添加了功能，因为我发现它对于现实世界的场景来说太原始了（使用复杂的 JSON 源，在选择项目时执行操作。）你可以看到here，至少你可以理解如何操纵结果。
*.com/a/11747290/212702

标签： jquery twitter-bootstrap typeahead

【解决方案1】：

如果页面上只有 1 个，您可以尝试 $('ul.typeahead li.active').data('value');，但如果页面上超过 1 个，您可能会遇到问题。

不知道是不是没有设置输入值的原因？

【讨论】：

这在选择框上的模糊事件中对我有用：$(this).parent().find("ul.typeahead li.active").data("value")

【解决方案2】：

我正在处理这个问题，我现在遇到了同样的问题。我打算用这个漂亮的叉子解决它

https://gist.github.com/1891669

我通过回调做到了：

  $('.typeahead').typeahead({
    // note that "value" is the default setting for the property option
    source: [{value: 'Charlie'}, {value: 'Gudbergur'}, ...],
    onselect: function(obj) { console.log(obj) }
  })

希望对你也有帮助。

【讨论】：

我最终想出了如何做到这一点。你可以在 jQuery 中使用： $("ul.typeahead.dropdown-menu").find('li.active').data('value');

【解决方案3】：

你从错误的角度看它。 Bootstrap 的 typeahead 方法提供了一个选项，允许您传递一个回调函数，该函数接收选定的值作为参数。下面是一个简明示例，仅说明这一论点。

$('#typeaheadID').typeahead({
    updater: function(selection){
        console.log("You selected: " + selection)
    }
})

干杯！ documentation refernece

【讨论】：

重要的是从更新函数返回选择。否则输入字段将为空
这仅在用户实际选择了一个项目时才有效。如果我想要当前突出显示的值，而不是选中，这将不起作用。
这行得通，它应该是公认的答案。

【解决方案4】：

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

您只需在回调函数中传递 itemSelected，它就会为您提供所选项目。

希望这对你有用。

【讨论】：

【解决方案5】：

$('#autocomplete').on('typeahead:selected', function (e, datum) {
    console.log(datum);
});
$('#autocomplete').on('typeahead:cursorchanged', function (e, datum) {
    console.log(datum);
});

似乎 Typeahead 更改的侦听器和用法没有得到很好的记录。您可以使用这些侦听器。

更新

事件名称在以后的版本中更改为typeahead:select。

【讨论】：

这是官方解决方案
想知道为什么这个答案没有被标记为正确.. 虽然这是完美的答案
@Rohit（以及其他人评论为什么这不是选定的答案） - 因为最初的问题是关于 Bootstrap2 typeahead，而这个答案是针对较新的独立 Twitter Typeahead，它是2012 年还没有。
请注意，事件名称已更改为 typeahead:select 在以后的版本中。
@ymutlu 当我尝试传入datum.id 时，我得到undefined。如何访问用户 ID 以使其成为用户显示页面的可点击链接？

【解决方案6】：

如果您正在使用另一个按钮来处理选定的项目或需要在更新后不正确地获取此项目，您可以使用$("#your_input").next("ul").find("li.active").data("value"); 来获取您的价值。

为 ajax bootstrap typeahead 工作。

【讨论】：