jQuery 获取 Bootstrap 预先输入的选定项目值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9459437/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 10:50:13  来源:igfitidea点击:

Get selected items value for Bootstrap's typeahead

jquerytwitter-bootstraptypeahead

提问by T.S.

Bootstrap just implemented a neat autocomplete feature called typeahead. I am having trouble getting the appropriate value for the text input.

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

For instance, I might have the following:

例如,我可能有以下内容:

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

This does not appear to capture the selected value. Does anyone know how to get the selected value using typeahead with Bootstrap?

这似乎无法捕获选定的值。有谁知道如何在 Bootstrap 中使用 typeahead 来获取选定的值?

回答by ymutlu

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

Seems Typeahead changed listeners and usages are not well documented. You can use these listeners.

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

UPDATE

更新

Event name was changed to typeahead:selectin later versions.

事件名称typeahead:select在更高版本中更改为。

回答by Secesh

You're looking at it from the wrong angle. Bootstrap's typeahead method provides an option which allows you to pass a callback function that receives the selected value as the argument. Below is a condensed example illustrating just this one argument.

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

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

cheers! documentation refernece

干杯! 文档参考

回答by vanhalt

I'm working with this and I'm having the same issue right now. I'm planning to solve it with this pretty fork

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

https://gist.github.com/1891669

https://gist.github.com/1891669

And I did it with a callback:

我通过回调做到了:

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

Hope it helps you too.

希望对你也有帮助。

回答by kendaleiv

If you only had 1 on the page you could try $('ul.typeahead li.active').data('value');but you may have have issues if there's more than 1 on a page.

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

I wonder if there's a reason why the input value is not set?

我想知道未设置输入值是否有原因?

回答by Mr.k

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

You have to just pass itemSelected in the callback function and it will give you the selected item.

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

Hope this will work for you.

希望这对你有用。

回答by Filip Ková?

If you are using another button to work with selected item or need get this item not right after update you can use $("#your_input").next("ul").find("li.active").data("value");to get your value.

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

Working for ajax bootstrap typeahead.

为 ajax bootstrap typeahead 工作。