jQuery bootstrap-typeahead.js 在 select 事件上添加一个监听器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9496314/
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
bootstrap-typeahead.js add a listener on select event
提问by Hyman.cap.rooney
I'm new to the Bootstrap Twitter framework, and I need to use bootstrap-typeahead.js for autocomplete but I need also to get the value selected by the user for the typeahead.
我是 Bootstrap Twitter 框架的新手，我需要使用 bootstrap-typeahead.js 进行自动完成，但我还需要获取用户为 typeahead 选择的值。
This is my code:
这是我的代码：
<input type="text" class="span3" style="margin: 0 auto;"
data-provide="typeahead" data- items="4"
data-source='["Alabama","Alaska"]'>
How can I add a listener to get the selected value from type typeahead and pass it in a function? For example when I use ExtJs, I apply this structure:
如何添加侦听器以从 typeahead 中获取所选值并将其传递给函数？例如，当我使用 ExtJs 时，我应用了这个结构：
listeners: {
select: function(value){
........
}
}
How can I do something similar with a typeahead?
我怎样才能用预先输入做类似的事情？
采纳答案by Pezholio
Try this fork of typeahead. It gives you an onselect event, asynchronous population and more!
试试这个 typeahead 的分支。它为您提供了一个 onselect 事件、异步填充等等！
回答by Capy
you should use "updater":
你应该使用“更新程序”：
$('#search-box').typeahead({
source: ["foo", "bar"],
updater:function (item) {
//item = selected item
//do your stuff.
//dont forget to return the item to reflect them into input
return item;
}
});
回答by pscheit
In v3 twitter bootstrap typeahead will be dropped an replaced with the twitter typeahead (which has the feature you want to and a lot more)
在 v3 twitter bootstrap typeahead 将被删除并替换为 twitter typeahead（它具有您想要的功能以及更多）
https://github.com/twitter/typeahead.js
https://github.com/twitter/typeahead.js
usage like this:
用法如下：
jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) {
console.log(datum);
});
回答by ahmad molaie
you can use afterSelect
您可以使用 afterSelect
$('#someinput').typeahead({
source: ['test1', 'test2'],
afterSelect: function (item) {
// do what is needed with item
//and then, for example ,focus on some other control
$("#someelementID").focus();
}
});
回答by philippinedev
Thanks P.scheit for your answer. Let me just add this to your solution which handles autocompletion when user presses the tab key.
感谢 P.scheit 的回答。让我将它添加到您的解决方案中，该解决方案在用户按下 Tab 键时处理自动完成。
jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) {
console.log(datum);
}).on('typeahead:autocompleted', function (e, datum) {
console.log(datum);
});
回答by Hollownest
I've been able to get this working by simply watching the "change" event on the element, which Twitter Bootstrap Typeahead fires on select.
我已经能够通过简单地观察元素上的“更改”事件来完成这项工作，Twitter Bootstrap Typeahead 在选择时触发。
var onChange = function(event) {
console.log "Changed: " + event.target.value
};
$('input.typeahead').typeahead({ source: ['test1', 'test2'] });
$('input.typeahead').on('change', onChange);
Outputs 'Changed: test1' when the user selects test1.
当用户选择 test1 时输出 'Changed: test1'。
NOTE: It also fires the event when the user presses "Enter" even if no match is found, so you have to decide if that's what you want. Especially, if the user enters "te" and then clicks "test1", you will get an event for "te" and an event for "test1", which you may want to debounce.
注意：即使没有找到匹配项，它也会在用户按下“Enter”时触发事件，因此您必须决定这是否是您想要的。特别是，如果用户输入“te”，然后单击“test1”，您将获得“te”的事件和“test1”的事件，您可能希望对其进行去抖。
(Version 2.0.2 Twitter Bootstrap Typeahead)
（版本 2.0.2 Twitter Bootstrap Typeahead）
回答by Abs
Heres the solution with multi-event on for tabbed and selected:
下面是针对选项卡式和选定项启用多事件的解决方案：
$('#remote .typeahead').on(
{
'typeahead:selected': function(e, datum) {
console.log(datum);
console.log('selected');
},
'typeahead:autocompleted': function(e, datum) {
console.log(datum);
console.log('tabbed');
}
});
回答by Konstantin Panfilov
$('input.typeahead').typeahead({
source: ['test1', 'test2'],
itemSelected: function(e){
---your code here---
}
});
回答by user968167
I had the same problem. You can use this function to make your custom events: https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed(to add more events you have to know typeahead prototype structure)
我有同样的问题。你可以使用这个函数来制作你的自定义事件：https: //github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed（添加更多事件你必须知道 typeahead 原型结构）
