blocks|key|636979|text|试试this+fork+of+typeahead。它为你提供了onselect事件，异步填充等等！|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|636980|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/1891669^0|2|M|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Try <a href="https://gist.github.com/1891669" rel="nofollow">this fork of typeahead</a>. It gives you an onselect event, asynchronous population and more!

blocks|key|422576|text|我只需观察元素上的"change“事件，Twitter+Bootstrap+Typeahead就会在select上触发该事件，就可以让它正常工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|422577|var+onChange+=+function(event)+{
++console.log+"Changed:+"+%2B+event.target.value
};

$('input.typeahead').typeahead({+source:+['test1',+'test2']+});
$('input.typeahead').on('change',+onChange);|code-block|syntax|javascript|422578|当用户选择test1时，输出'Changed:+test1‘。|422579|注意:它还会在用户按下"Enter“时触发事件，即使没有找到匹配项，因此您必须决定这是否是您想要的。特别是，如果用户输入"te“，然后单击"test1"，您将获得一个针对"te”的事件和一个针对“test1”的事件，您可能希望取消这两个事件。|422580|(+2.0.2版Twitter+Bootstrap+Typeahead)|422581|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I've been able to get this working by simply watching the "change" event on the element, which Twitter Bootstrap Typeahead fires on select. 

<pre><code>var onChange = function(event) {
 console.log "Changed: " + event.target.value
};

$('input.typeahead').typeahead({ source: ['test1', 'test2'] });
$('input.typeahead').on('change', onChange);
</code></pre>

Outputs 'Changed: test1' when the user selects 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.

(Version 2.0.2 Twitter Bootstrap Typeahead)

blocks|key|422620|text|我也有同样的问题。您可以使用此函数来创建自定义事件：https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed+(要添加更多事件，您必须了解typeahead原型结构)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|422621|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed^0|Q|29|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I had the same problem. You can use this function to make your custom events: <a href="https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed" rel="nofollow">https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed</a>
(to add more events you have to know typeahead prototype structure)

blocks|key|422700|text|在v3中，twitter+bootstrap+typeahead将被删除，取而代之的是twitter+typeahead+(它有你想要的特性以及更多特性)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|422701|https://github.com/twitter/typeahead.js|offset|length|422702|用法如下：|422703|jQuery('#autocomplete-input').on('typeahead:selected',+function+(e,+datum)+{
++++console.log(datum);
});|code-block|syntax|javascript|422704|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|13|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

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)

<a href="https://github.com/twitter/typeahead.js">https://github.com/twitter/typeahead.js</a>

usage like this:

<pre><code>jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) {
 console.log(datum);
});
</code></pre>

blocks|key|637283|text|感谢P.scheit的回答。让我把这个添加到你的解决方案中，当用户按下Tab键时，它会自动完成。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|637284|jQuery('#autocomplete-input').on('typeahead:selected',+function+(e,+datum)+{
++++console.log(datum);
}).on('typeahead:autocompleted',+function+(e,+datum)+{
++++console.log(datum);
});|code-block|syntax|javascript|637285|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Thanks P.scheit for your answer. Let me just add this to your solution which handles autocompletion when user presses the tab key.

<pre><code>jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) {
 console.log(datum);
}).on('typeahead:autocompleted', function (e, datum) {
 console.log(datum);
});
</code></pre>

blocks|key|422771|text|$('input.typeahead').typeahead({+
++++source:+['test1',+'test2'],+
++++itemSelected:+function(e){+
++++++++---your+code+here---
++++}+
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|422772|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$('input.typeahead').typeahead({ 
 source: ['test1', 'test2'], 
 itemSelected: function(e){ 
 ---your code here---
 } 
});
</code></pre>

blocks|key|422785|text|您可以使用afterSelect|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|422786|$('#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();
++++}
});|code-block|syntax|javascript|422787|entityMap^0|5|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

you can use <code>afterSelect</code>

<pre><code>$('#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();
 }
});
</code></pre>

blocks|key|422844|text|以下是选项卡式和选中状态下启用多事件的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|422845|$('#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');
++++++++}
});|code-block|syntax|javascript|422846|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Heres the solution with multi-event on for tabbed and selected:

<pre><code>$('#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');
 }
});
</code></pre>

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.

This is my code:

<pre><code>&lt;input type="text" class="span3" style="margin: 0 auto;" 
 data-provide="typeahead" data- items="4" 
 data-source='["Alabama","Alaska"]'&gt;
</code></pre>

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:

<pre><code>listeners: {
 select: function(value){
 ........
 }
}
</code></pre>

How can I do something similar with a typeahead?

bootstrap-typeahead.js add a listener on select event

jQuery

我刚接触Bootstrap Twitter框架，我需要使用bootstrap-typeahead.js来自动完成，但我还需要获取用户为typeahead选择的值。这是我的代码：<input type="text" class="span3" style="margin: 0 auto;" ...

问bootstrap-typeahead.js在select事件上添加侦听器
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问bootstrap-typeahead.js在select事件上添加侦听器EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问bootstrap-typeahead.js在select事件上添加侦听器
EN