blocks|key|1951276|text|触发输入似乎可以做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1951277|$(".typeahead").eq(0).val("Uni").trigger("input");|code-block|syntax|javascript|1951278|在example+page上对此进行了测试。|offset|length|1951279|entityMap|0|LINK|mutability|MUTABLE|url|http://twitter.github.com/typeahead.js/examples/^0|0|0|1|C|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Triggering input seems to do it.

<pre><code>$(".typeahead").eq(0).val("Uni").trigger("input");
</code></pre>

Tested this on the <a href="http://twitter.github.com/typeahead.js/examples/">example page</a>.

blocks|key|5785043|text|根据我的测试(请参阅fiddle)，要显示dropdown，必须使用focus()方法。所以：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5785044|theVal+=+$('.typeahead').val();
$(".typeahead").typeahead('val',+'')
$(".typeahead").focus().typeahead('val',theVal).focus();|code-block|syntax|javascript|5785045|5785046|在第1行，我们将Typeahead输入的当前值赋给变量theVal;|unordered-list-item|style|BOLD|5785047|On第2行，我们只需重置typeahead的计算值；|5785048|在第3行，我们放回原始值和焦点，这会导致建议下拉菜单显示得好像用户输入了什么。|5785049|5785050|我实际上需要这样做，以强烈鼓励用户从来自地理编码API调用的猎犬建议中进行选择，这样我就可以确保客户端在提交表单之前获得了坐标。|5785051|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Sam_Butler/df88n/2/^0|A|6|0|0|0|0|R|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|F|7|17|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|18|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|19|8|@$A|1A|B|1B|M|N]]|9|@]|C|$]]|$1|O|3|P|5|L|7|1C|8|@]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1D|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]|$1|T|3|U|5|6|7|1F|8|@]|9|@]|C|$]]|$1|V|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|W|$X|$5|Y|Z|10|C|$11|12]]]]

According to my tests (see <a href="http://jsfiddle.net/Sam_Butler/df88n/2/">fiddle</a>), the focus() method is necessary in order to display the dropdown. So:

<pre><code>theVal = $('.typeahead').val();
$(".typeahead").typeahead('val', '')
$(".typeahead").focus().typeahead('val',theVal).focus();
</code></pre>

<ul>
<li>On line 1, we're assigning the current value of the Typeahead input to the variable theVal;</li>
<li>On line 2 we simply reset typeahead's computed value; and</li>
<li>On line 3 we're putting back the original value and the focus, which results in the suggestion dropdown displaying as if the user had typed something.</li>
</ul>

I actually needed this to strongly encourage users to select from the Bloodhound suggestions coming from a geocoding API call so I could ensure the coordinates were obtained by the client prior to submitting a form.

blocks|key|739942|text|$(".typeahead").typeahead('lookup').focus();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|739943|具有现有输入值的触发器。当然，您可以提前更改该值|unstyled|739944|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$(".typeahead").typeahead('lookup').focus();
</code></pre>

triggers with existing value of input. you can change the value in advance of course

blocks|key|740304|text|对于任何在twitter的typeahead+0.11.1之后的版本中发现这个问题的人，这里是我用一句话解决这个问题的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|740305|$(".typeahead-input").typeahead('val',+"cookie")
+++++++++++++++++++++.trigger("input")
+++++++++++++++++++++.typeahead('open');|code-block|syntax|javascript|740306|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|$]]

To anyone finding this issue with twitter's typeahead after version 0.11.1, here is how I solved it with one line:

<pre><code>$(".typeahead-input").typeahead('val', "cookie")
 .trigger("input")
 .typeahead('open');
</code></pre>

blocks|key|5784879|text|从Typeahead+v0.10.1开始，更改typeahead的值将触发另一个查询并打开下拉列表：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5784880|var+val+=+$(".typeahead").typeahead('val');
$(".typeahead").typeahead('val',+'');
$(".typeahead").typeahead('val',+val);|code-block|syntax|javascript|5784881|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|$]]

As of Typeahead v0.10.1, changing the value of the typeahead will trigger another query and open the dropdown:

<pre><code>var val = $(".typeahead").typeahead('val');
$(".typeahead").typeahead('val', '');
$(".typeahead").typeahead('val', val);
</code></pre>

blocks|key|740276|text|我使用了twitter+bootstrap+typeahead，点击焦点，建议列表就会打开。这里的答案对我来说不是很有效，所以我写了这个简单的指令(需要jquery)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|740277|.directive('typeaheadFocusTrigger',+function()+{
++++++++return+{
++++++++++++limit:+'A',
++++++++++++link:+function(scope,+element,+attrs)+{
++++++++++++++++$(element).on('focus',+function(e)+{
++++++++++++++++++++var+$target+=+$(e.target);
++++++++++++++++++++var+origVal+=+$target.eq(0).val();
++++++++++++++++++++$target.eq(0).val('').trigger('input')
++++++++++++++++++++.eq(0).val(origVal).trigger('input');
++++++++++++++++});
++++++++++++}
++++++++}
++++});|code-block|syntax|javascript|740278|现在只需添加此属性，它将在焦点上触发|740279|<input+typeahead-focus-trigger+typeahead="">|740280|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I used twitter bootstrap typeahead, and wamted that on focus, the suggestion list will open.
The answers here didn't quite work for me, so I wrote this simple directive (requires jquery):

<pre><code>.directive('typeaheadFocusTrigger', function() {
 return {
 limit: 'A',
 link: function(scope, element, attrs) {
 $(element).on('focus', function(e) {
 var $target = $(e.target);
 var origVal = $target.eq(0).val();
 $target.eq(0).val('').trigger('input')
 .eq(0).val(origVal).trigger('input');
 });
 }
 }
 });
</code></pre>

Now just add this attribute, and it will trigger on focus

<pre><code>&lt;input typeahead-focus-trigger typeahead=""&gt;
</code></pre>

blocks|key|5303462|text|使用:+Typeahead+v0.10.5|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5303463|请勿使用：+$('.typeahead').typeahead('open');|offset|length|style|BOLD|CODE|5303464|这目前不起作用。来源：https://github.com/twitter/typeahead.js/issues/798。作为临时修复，使用自定义typeahead+keydown事件(在实例化jQuery之后)：|5303465|var+ttInstance+=+$('.typeahead').typeahead(+config+);+//+Create+Typeahead
ttInstance.typeahead('val',+'pancakes');+//+Set+an+initial+value

var+evt+=+jQuery.Event('keydown');
evt.keyCode+=+evt.which+=+40;
ttInstance.trigger(evt);+//+Opens+the+dropdown|code-block|syntax|javascript|5303466|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twitter/typeahead.js/issues/798^0|0|0|5|6|Y|0|B|1E|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@$D|Z|E|10|F|G]|$D|11|E|12|F|H]]|9|@]|A|$]]|$1|I|3|J|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|K|3|L|5|M|7|17|8|@]|9|@]|A|$N|O]]|$1|P|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

Using: Typeahead v0.10.5

Don't use:
<code>$('.typeahead').typeahead('open');</code>

This currently does not work. Source: <a href="https://github.com/twitter/typeahead.js/issues/798" rel="noreferrer">https://github.com/twitter/typeahead.js/issues/798</a>.
As a temporary fix, use a a custom jQuery keydown event (after you have instantiated the typeahead):

<pre><code>var ttInstance = $('.typeahead').typeahead( config ); // Create Typeahead
ttInstance.typeahead('val', 'pancakes'); // Set an initial value

var evt = jQuery.Event('keydown');
evt.keyCode = evt.which = 40;
ttInstance.trigger(evt); // Opens the dropdown
</code></pre>

blocks|key|5784792|text|浏览一下源代码，它似乎在键typeahead下的element数据中存储了一个TypeaheadView对象。此焦点对象有一个内部方法_showDropdown，该方法在内部绑定到TypeaheadView事件(以及其他一些事件)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5784793|我不建议这样做，但您应该能够手动调用该内部方法：|5784794|$('#yourTypeaheadElement').data('typeahead')._showDropdown();|code-block|syntax|javascript|5784795|或者，当页面加载时(当然是在将其初始化为typeahead元素之后)，您是否尝试简单地将typeahead元素作为焦点：|5784796|//+after+page+loads+and+yourTypeaheadElement+is+initialized+as+a+typeahead
$('#yourTypeaheadElement').focus();|5784797|entityMap^0|D|9|13|D|1V|D|2I|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|R|$]]

Looking through the source code, it appears to store a <code>TypeaheadView</code> object in the element data under the key <code>typeahead</code>. This <code>TypeaheadView</code> object has an internal method, <code>_showDropdown</code>, which is internally bound to the focus event (and a few others).

I would not recommend doing this, but you should be able to call that internal method manually:

<pre><code>$('#yourTypeaheadElement').data('typeahead')._showDropdown();
</code></pre>

Alternatively, have you just tried simply focusing your typeahead element when the page loads (after initializing it as a typeahead element, of course):

<pre><code>// after page loads and yourTypeaheadElement is initialized as a typeahead
$('#yourTypeaheadElement').focus();
</code></pre>

blocks|key|5303480|text|除非你故意将'typeahead‘放入你的input标签的类中，否则这些都不会起作用。如果您觉得不需要这样做(它不需要工作)，那么最好使用由typeahead.js编写到输入标记上的类。它是".tt-input“。以下是我从Sam_Butler中抄袭的示例，为新的CSS类重新编码。在最新的typeahead+0.10.5中，这对我是有效的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5303481|var+theVal+=+jQuery('.tt-input').val();
jQuery(".tt-input").typeahead('val',+'re')
jQuery(".tt-input").focus().typeahead('val',theVal).focus();|code-block|syntax|javascript|5303482|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|$]]

None of these will work unless you deliberately put 'typeahead' into the classes of your input tag. If you don't feel the need to do this (it's not necessary for it to work), you're better off using the class written onto the input tag by typeahead.js. It's ".tt-input". Here's the example I cribbed from Sam_Butler, recoded for the new CSS class. This works for me in the most recent typeahead 0.10.5:

<pre><code>var theVal = jQuery('.tt-input').val();
jQuery(".tt-input").typeahead('val', 're')
jQuery(".tt-input").focus().typeahead('val',theVal).focus();
</code></pre>

blocks|key|1951236|text|我看了一下源代码，发现了以下未记录的方式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1951237|var+$myinput+=+$('#myinput');
$myinput.data('typeahead')._showDropdown()|code-block|syntax|javascript|1951238|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|$]]

I took a look at the source code and found this undocumented way:

<pre><code>var $myinput = $('#myinput');
$myinput.data('typeahead')._showDropdown()
</code></pre>

blocks|key|1951314|text|这应该适用于“旧的”bootstrap+typeahead插件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1951315|$(".typeahead").eq(0).trigger("keyup");|code-block|syntax|javascript|1951316|不幸的是，还没有使用IE进行测试。不知道新的typeahead插件...|1951317|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This should work with the "old" bootstrap typeahead plugin:

<pre><code>$(".typeahead").eq(0).trigger("keyup");
</code></pre>

Haven't tested with IE unfortunately...
Don't know about the new typeahead plugin...

blocks|key|5785057|text|这是@Sam_Butler工作的一个简化版本：http://jsfiddle.net/rimian/hrnf9|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5785058|<button+type="button"+id="button">Crick</button>
<input+type="text"+id="text"+class="typeahead">|code-block|syntax|javascript|5785059|Javascript：|5785060|$('#button').click(function()+{
++$("#text").focus().typeahead('val',+'London');
});

//+instantiate+the+bloodhound+suggestion+engine
var+locations+=+new+Bloodhound({
++++datumTokenizer:+Bloodhound.tokenizers.obj.whitespace('value'),
++++queryTokenizer:+Bloodhound.tokenizers.whitespace,
++++remote:+{
++++++++url:+'https://maps.googleapis.com/maps/api/geocode/json?address=%25QUERY&components=country:GB&sensor=false&region=uk',+//add+key
++++++++filter:+function+(locations)+{
++++++++++++return+$.map(locations.results,+function+(location)+{
++++++++++++++++return+{
++++++++++++++++++++value:+location.formatted_address
++++++++++++++++};
++++++++++++});
++++++++}
++++}
});

locations.initialize();

$('#text').typeahead(null,+{
++++name:+'value',
++++displayKey:+'value',
++++source:+locations.ttAdapter()
});|5785061|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/rimian/hrnf9^0|N|W|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

Here's a simplified version of @Sam_Butler's work: <a href="http://jsfiddle.net/rimian/hrnf9" rel="nofollow">http://jsfiddle.net/rimian/hrnf9</a>

<pre><code>&lt;button type="button" id="button"&gt;Crick&lt;/button&gt;
&lt;input type="text" id="text" class="typeahead"&gt;
</code></pre>

Javascript:

<pre><code>$('#button').click(function() {
 $("#text").focus().typeahead('val', 'London');
});

// instantiate the bloodhound suggestion engine
var locations = new Bloodhound({
 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
 queryTokenizer: Bloodhound.tokenizers.whitespace,
 remote: {
 url: 'https://maps.googleapis.com/maps/api/geocode/json?address=%QUERY&amp;components=country:GB&amp;sensor=false&amp;region=uk', //add key
 filter: function (locations) {
 return $.map(locations.results, function (location) {
 return {
 value: location.formatted_address
 };
 });
 }
 }
});

locations.initialize();

$('#text').typeahead(null, {
 name: 'value',
 displayKey: 'value',
 source: locations.ttAdapter()
});
</code></pre>

blocks|key|740130|text|小心这一点！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|740131|对于那些正在考虑手动触发typeahead行为的人(例如，在单击按钮时)，我强烈建议您不要这样做。|740132|我为了这个解决方案而来，为了让它正常工作，我几乎花了一整天的时间来解决这个问题(在我的例子中，这是一个按钮点击)。|740133|对于那些真正想要走这条黑暗道路的人，我与你分享我让它工作的丑陋代码：|740134|//Removes+default+features+of+typeahead
//This+means+that+typeahead+will+not+work+like+an+"autocomplete",+it+only+will+be+trigged+when+the+user+Click+in+#btnSearch+button!
var+txt+=+$("#typeahead");
//Save+input+events+in+variables+(we'll+need+them)
eventInput+=+$._data(txt[0],+"events").input[0];
eventBlur+=+$._data(txt[0],+"events").blur[1];
//Remove+input+events
txt.unbind("blur");
txt.unbind("input");

//Set+click+event+that+triggers+typeahead+features+manually
$("#btnSearch").click(function+()+{
++++//Clears+the+cache+of+engine+for+it+call+ajax+again,+without+it+when+the+term+was+already+searched+the+ajax+is+not+called!
++++engine.clearRemoteCache();

++++txt.focus();+//When+we+click+in+a+button,+the+focus+from+input+is+lost,+so+we+set+it+again+to+not+lose+the+behaviors+of+keyboard+keys+(up,+down,+tab,+etc)
++++txt.bind("input",+eventInput);+//Bind+the+event+that+we+had+saved
++++txt.trigger("input");+//Trigger+input+(like+the+answer+from+@epascarello)
++++txt.unbind("input");+//Removes+it+again+
});

//Set+event+on+parent+of+the+suggestion's+div,+this+makes+the+sugestion+div+close+when+user+click+outside+it
$("body").click(function+()+{++++++++++++
++++if+(eventBlur+!=+undefined)+{
++++++++if+($(".tt-dropdown-menu:visible").length+>+0)+{
++++++++++++eventBlur.handler();+//This+event+closes+the+suggestion+menu
++++++++}
++++}
});|code-block|syntax|javascript|740135|我做的另一件事是在typeahead.js上更改了event+"_checkInputValue"的代码。我更改了以下内容：|offset|length|style|BOLD|740136|areEquivalent+=+areQueriesEquivalent(inputValue,+this.query);|740137|要这样做：|740138|areEquivalent+=+false;//areQueriesEquivalent(inputValue,+this.query);|740139|我将其设置为false是因为typeahead+不会向服务器发送两个相同的请求。当用户在搜索按钮中单击两次时(我的意思是，当他多次搜索他已经搜索过的相同文本时)。无论如何，如果你使用的是本地数据，你就不需要这么做了。|740140|entityMap^0|0|0|0|0|0|V|I|0|0|0|0|O|6|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@$O|18|P|19|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1B|8|@]|9|@]|A|$]]|$1|W|3|X|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|Y|3|Z|5|6|7|1D|8|@$O|1E|P|1F|Q|R]]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|11|$]]

<h2>Be careful with this!</h2>

For those who are thinking about trigger typeahead behavior manually (on a button click for example) I strongly recommend you to don't do this.

I came for this solution and I lost almost an entire day making workarounds to it work properly (in my case that was a button click).

For those who really want go by this dark way, I share with you my ugly code that makes it work:

<pre><code>//Removes default features of typeahead
//This means that typeahead will not work like an "autocomplete", it only will be trigged when the user Click in #btnSearch button!
var txt = $("#typeahead");
//Save input events in variables (we'll need them)
eventInput = $._data(txt[0], "events").input[0];
eventBlur = $._data(txt[0], "events").blur[1];
//Remove input events
txt.unbind("blur");
txt.unbind("input");

//Set click event that triggers typeahead features manually
$("#btnSearch").click(function () {
 //Clears the cache of engine for it call ajax again, without it when the term was already searched the ajax is not called!
 engine.clearRemoteCache();

 txt.focus(); //When we click in a button, the focus from input is lost, so we set it again to not lose the behaviors of keyboard keys (up, down, tab, etc)
 txt.bind("input", eventInput); //Bind the event that we had saved
 txt.trigger("input"); //Trigger input (like the answer from @epascarello)
 txt.unbind("input"); //Removes it again 
});

//Set event on parent of the suggestion's div, this makes the sugestion div close when user click outside it
$("body").click(function () { 
 if (eventBlur != undefined) {
 if ($(".tt-dropdown-menu:visible").length &gt; 0) {
 eventBlur.handler(); //This event closes the suggestion menu
 }
 }
});
</code></pre>

Another thing that I did was change a code of the event "_checkInputValue" on typeahead.js. I change this:

<pre><code>areEquivalent = areQueriesEquivalent(inputValue, this.query);
</code></pre>

to this:

<pre><code>areEquivalent = false;//areQueriesEquivalent(inputValue, this.query);
</code></pre>

I set it to false because typeahead don't send two identical requests to server. This occur when the user clicks twice in the search button (I mean, when he searches more than once the same text that he has already searched for). Anyway, if you are using local data you won't need to do this.

blocks|key|5303226|text|这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5303227|$(+document+).ready(function()+{
++++$('#the-basics+.typeahead').typeahead({
++++++hint:+false,
++++++highlight:+true,
++++++minLength:+0
++++},
++++{
++++++name:+'states',
++++++displayKey:+'value',
++++++source:+substringMatcher(states)
++++});

++++//set+a+value+to+input+to+trigger+opening
++++$(".typeahead").eq(0).val("a").trigger("input");
++++//remove+value+for+end+user
++++$(".typeahead").eq(0).val("");

});|code-block|syntax|javascript|5303228|请看这里，例如：http://joshuamaynard.com/sandbox/autocomplete|offset|length|5303229|entityMap|0|LINK|mutability|MUTABLE|url|http://joshuamaynard.com/sandbox/autocomplete^0|0|0|8|19|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

This worked for me. 

<pre><code>$( document ).ready(function() {
 $('#the-basics .typeahead').typeahead({
 hint: false,
 highlight: true,
 minLength: 0
 },
 {
 name: 'states',
 displayKey: 'value',
 source: substringMatcher(states)
 });

 //set a value to input to trigger opening
 $(".typeahead").eq(0).val("a").trigger("input");
 //remove value for end user
 $(".typeahead").eq(0).val("");

});
</code></pre>

See here for example: <a href="http://joshuamaynard.com/sandbox/autocomplete" rel="nofollow">http://joshuamaynard.com/sandbox/autocomplete</a>

blocks|key|5785376|text|此解决方案不涉及定制任何angular-ui代码本身，并且仅用于触发typeahead在显式按钮单击时获取结果的目的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5785377|为此，我必须将一个文本字段覆盖在另一个(禁用的)文本字段之上，该文本字段是带有typeahead的实际文本字段。没有人会知道另一个在那里，但是它需要在那里，以便angular-ui在正确的位置启动菜单。您不能将其设置为隐藏字段，因为它将无法在正确的位置显示菜单。|5785378|下面的指令将监视typeaheadText和typeaheadTrigger变量在按钮触发时填充禁用字段(通过将触发器设置为true)。该指令具有独立的作用域，因此除了传入之外，它不依赖于任何其他内容。|offset|length|style|CODE|5785379|directive('typeaheadTrigger',+function()+{
++return+{
++++require:+["ngModel"],
++++scope:+{
++++++typeaheadText:+'=',
++++++triggerFlag:+'='
++++},
++++link:+function(scope,+element,+attr,+ctrls)+{
++++++scope.$watch('triggerFlag',+function(value)+{
++++++++if+(scope.triggerFlag)+{
++++++++++ctrls[0].$setViewValue(scope.typeaheadText);
++++++++++scope.typeaheadText+=+'';
++++++++++scope.triggerFlag+=+false;
++++++++}
++++++});
++++}
++};
})|code-block|syntax|javascript|5785380|控制器为此设置了一些东西-对象内的触发器和文本范围变量。这演示了如何做到这一点-理想情况下，你应该把整个东西包装在另一个指令中，这样它就可以在你的应用程序中使用，同时隐藏细节。|5785381|这是最重要的：http://plnkr.co/edit/UYjz6F5ydkMQznkZAlfx?p=preview|5785382|entityMap|0|LINK|mutability|MUTABLE|url|http://plnkr.co/edit/UYjz6F5ydkMQznkZAlfx?p=preview^0|0|0|8|D|M|G|0|0|0|7|1F|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@$F|13|G|14|H|I]|$F|15|G|16|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$F|1A|G|1B|1|1C]]|A|$]]|$1|S|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

The other answers were helpful but did not solve my problem. This solution does not involve customising any of the angular-ui code itself and serves the purpose of only triggering the typeahead to fetch results on an explicit button click.

To do this I had to overlay a text field on top of another (disabled) text field that is the actual one with the typeahead. Nobody will know the other one is there but it needs to be there for angular-ui to launch the menu in the correct location. You can't make it a hidden field because it will not be able to show the menu in the correct location.

The directive below will watch the <code>typeaheadText</code> and <code>typeaheadTrigger</code> variables to populate the disbled field when the button triggers this (by setting the trigger to true). The directive has isolated scope so it does not depend on anything other than passed in.

<pre><code>directive('typeaheadTrigger', function() {
 return {
 require: ["ngModel"],
 scope: {
 typeaheadText: '=',
 triggerFlag: '='
 },
 link: function(scope, element, attr, ctrls) {
 scope.$watch('triggerFlag', function(value) {
 if (scope.triggerFlag) {
 ctrls[0].$setViewValue(scope.typeaheadText);
 scope.typeaheadText = '';
 scope.triggerFlag = false;
 }
 });
 }
 };
})
</code></pre>

The controller sets a few things up for this - the trigger and text scope variables inside an object. This demonstrates how to do it - ideally you'd wrap this whole thing in another directive so it can be used in your application while hiding the details.

Here's the plunk: <a href="http://plnkr.co/edit/UYjz6F5ydkMQznkZAlfx?p=preview" rel="nofollow">http://plnkr.co/edit/UYjz6F5ydkMQznkZAlfx?p=preview</a>

blocks|key|5785472|text|当tt-dataset中有1个项目时，我使用它来手动触发选择。添加这个是很有意义的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5785473|$("#mytypeahead").keyup(function+(e)+{
++++++++++++++++var+charCode+=+(typeof+e.which+===+"number")+?+e.which+:+e.keyCode;
++++++++++++++++if+(charCode+==+13)+{
++++++++++++++++++++if+($(this).parent().find(".tt-dataset").children().length+==+1)+{
++++++++++++++++++++++++//This+is+how+we+are+submitting+a+single+selection+on+enter+key
++++++++++++++++++++++++$(this).parent().find(".tt-dataset").children(0).addClass("tt-cursor");
++++++++++++++++++++++++var+kde+=+jQuery.Event("keydown");
++++++++++++++++++++++++kde.which+=+13;
++++++++++++++++++++++++$(this).trigger(kde);+++++++++++++++++++++++++++
++++++++++++++++++++}++++
++++++++++++++++}++++++++++++++++++++
++++++++++++});|code-block|syntax|javascript|5785474|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|$]]

I used this to manually trigger a selection, when 1 item was in the tt-dataset. It just made sense to add this.

<pre><code>$("#mytypeahead").keyup(function (e) {
 var charCode = (typeof e.which === "number") ? e.which : e.keyCode;
 if (charCode == 13) {
 if ($(this).parent().find(".tt-dataset").children().length == 1) {
 //This is how we are submitting a single selection on enter key
 $(this).parent().find(".tt-dataset").children(0).addClass("tt-cursor");
 var kde = jQuery.Event("keydown");
 kde.which = 13;
 $(this).trigger(kde); 
 } 
 } 
 });
</code></pre>

blocks|key|1952088|text|我尝试了这里的所有方法，但都不起作用，只能使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1952089|$(".typeahead").val('hi').trigger('keyup');
$(".typeahead").val('hi').trigger('keydown');|code-block|syntax|javascript|1952090|上面的代码对我来说很有效。|1952091|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I tried every method here but it was not working, only by using

<pre><code>$(".typeahead").val('hi').trigger('keyup');
$(".typeahead").val('hi').trigger('keydown');
</code></pre>

The above code it worked for me. Don't know what exactly happened but using neither one worked only by using both it got worked.

I am using Twitter's typeahead.js (<a href="https://github.com/twitter/typeahead.js/" rel="noreferrer">https://github.com/twitter/typeahead.js/</a>) on an input field which is pre filled from a query string. After loading the page, i'd like to programmatically trigger the display of typeahead results without the user needing to type anything in the form field.

Out of the box, typeahead.js is only triggered if the user manually types something into the input field and i can not find any method in typeahead.js which i could call to trigger the display of results.

Any pointers would be greatly appreciated.

Thanks!

Programmatically triggering typeahead.js result display

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我在一个输入字段上使用了推特的typeahead.js ()，该输入字段是由查询字符串预先填充的。加载页面后，我希望以编程方式触发typeahead结果的显示，而无需用户在表单域中键入任何内容。开箱即用，只有当用户在输入字段中手动键入内容，并且我在typeahead.js中找不到任何可以调用来触发结果显示的方法时，才会触发typeahead.js。如果有任何建议，我们将非常感谢。谢谢!

问以编程方式触发typeahead.js结果显示
EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问以编程方式触发typeahead.js结果显示EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问以编程方式触发typeahead.js结果显示
EN