获取 Bootstrap 的 typeahead 的选定项目值

Question

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

例如，我可能有以下内容：

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

这似乎没有捕获所选值。有谁知道如何使用 Bootstrap 进行预输入来获取所选值？

Answer 1

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

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

更新

后续版本中活动名称改为

typeahead:select

。

Answer 2

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

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

干杯！ 文档参考

Answer 3

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

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) }
  })

希望对你也有帮助。

Answer 4

如果页面上只有 1 个，您可以尝试

$('ul.typeahead li.active').data('value');

，但如果页面上有超过 1 个，您可能会遇到问题。

不知道是否有原因导致输入值没有设置？

Answer 5

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

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

希望这对您有用。

Answer 6

如果您使用另一个按钮来处理所选项目，或者您需要在选择回调之外获取该项目，您可以使用

$("#your_input").next("ul").find("li.active").data("value");

来获取您的值。

用于 ajax bootstrap typeahead。