javascript 以编程方式触发 typeahead.js 结果显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15115059/
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
Programmatically triggering typeahead.js result display
提问by z??s u????s
I am using Twitter's typeahead.js (https://github.com/twitter/typeahead.js/) 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.
我在从查询字符串预填充的输入字段上使用 Twitter 的 typeahead.js ( https://github.com/twitter/typeahead.js/)。加载页面后，我想以编程方式触发预输入结果的显示，而无需用户在表单字段中输入任何内容。
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.
开箱即用，仅当用户在输入字段中手动输入内容时才会触发 typeahead.js，并且我在 typeahead.js 中找不到任何我可以调用以触发结果显示的方法。
Any pointers would be greatly appreciated.
任何指针将不胜感激。
Thanks!
谢谢！
回答by epascarello
Triggering input seems to do it.
触发输入似乎可以做到。
$(".typeahead").eq(0).val("Uni").trigger("input");
Tested this on the example page.
在示例页面上对此进行了测试。
回答by Sam_Butler
According to my tests (see fiddle), the focus() method is necessary in order to display the dropdown. So:
根据我的测试（请参阅fiddle），必须使用 focus() 方法才能显示下拉列表。所以：
theVal = $('.typeahead').val();
$(".typeahead").typeahead('val', '')
$(".typeahead").focus().typeahead('val',theVal).focus();
- On line 1, we're assigning the current value of the Typeahead input to the variable theVal;
- On line 2 we simply reset typeahead's computed value; and
- On line 3 we're putting back the original value andthe focus, which results in the suggestion dropdown displaying as if the user had typed something.
- 在第 1 行，我们将 Typeahead 输入的当前值分配给变量theVal；
- 在第 2 行，我们简单地重置 typeahead 的计算值；和
- 在第 3 行，我们放回了原始值和焦点，这导致建议下拉菜单显示为好像用户输入了某些内容。
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.
我实际上需要这个来强烈鼓励用户从来自地理编码 API 调用的 Bloodhound 建议中进行选择，这样我就可以确保在提交表单之前客户端获得了坐标。
回答by webenformasyon
$(".typeahead").typeahead('lookup').focus();
triggers with existing value of input. you can change the value in advance of course
使用现有的输入值触发。您当然可以提前更改值
回答by Megan
As of Typeahead v0.10.1, changing the value of the typeahead will trigger another query and open the dropdown:
从 Typeahead v0.10.1 开始，更改 typeahead 的值将触发另一个查询并打开下拉列表：
var val = $(".typeahead").typeahead('val');
$(".typeahead").typeahead('val', '');
$(".typeahead").typeahead('val', val);
回答by kcent
To anyone finding this issue with twitter's typeahead after version 0.11.1, here is how I solved it with one line:
对于在 0.11.1 版之后使用 twitter 的预先输入发现此问题的任何人，以下是我用一行解决它的方法：
$(".typeahead-input").typeahead('val', "cookie")
.trigger("input")
.typeahead('open');
回答by Vall3y
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):
我使用了 twitter bootstrap typeahead，并在焦点上等待，建议列表将打开。这里的答案对我来说不太适用，所以我写了这个简单的指令（需要 jquery）：
.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');
});
}
}
});
Now just add this attribute, and it will trigger on focus
现在只需添加此属性，它将在焦点上触发
<input typeahead-focus-trigger typeahead="">
回答by Matt Jensen
Using: Typeahead v0.10.5
使用：Typeahead v0.10.5
Don't use:$('.typeahead').typeahead('open');
不要使用：$('.typeahead').typeahead('open');
This currently does not work. Source: https://github.com/twitter/typeahead.js/issues/798. As a temporary fix, use a a custom jQuery keydown event (after you have instantiated the typeahead):
这目前不起作用。来源：https: //github.com/twitter/typeahead.js/issues/798。作为临时修复，使用自定义 jQuery keydown 事件（在实例化预先输入之后）：
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
回答by Artif3x
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:
除非您故意将“预先输入”放入输入标签的类中，否则这些都不会起作用。如果您觉得不需要这样做（它没有必要工作），您最好使用 typeahead.js 写入输入标签的类。它是“.tt-input”。这是我从 Sam_Butler 抄袭的示例，为新的 CSS 类重新编码。这在最新的 typeahead 0.10.5 中对我有用：
var theVal = jQuery('.tt-input').val();
jQuery(".tt-input").typeahead('val', 're')
jQuery(".tt-input").focus().typeahead('val',theVal).focus();
回答by jbabey
Looking through the source code, it appears to store a TypeaheadViewobject in the element data under the key typeahead. This TypeaheadViewobject has an internal method, _showDropdown, which is internally bound to the focus event (and a few others).
查看源代码，它似乎TypeaheadView在 key 下的元素 data 中存储了一个对象typeahead。这个TypeaheadView对象有一个内部方法，_showDropdown，它在内部绑定到焦点事件（和其他一些）。
I would not recommend doing this, but you should be able to call that internal method manually:
我不建议这样做，但您应该能够手动调用该内部方法：
$('#yourTypeaheadElement').data('typeahead')._showDropdown();
Alternatively, have you just tried simply focusing your typeahead element when the page loads (after initializing it as a typeahead element, of course):
或者，您是否尝试过在页面加载时简单地聚焦您的 typeahead 元素（当然是在将其初始化为 typeahead 元素之后）：
// after page loads and yourTypeaheadElement is initialized as a typeahead
$('#yourTypeaheadElement').focus();
回答by MarcoL
This should work with the "old" bootstrap typeahead plugin:
这应该适用于“旧”引导程序预先输入插件：
$(".typeahead").eq(0).trigger("keyup");
Haven't tested with IE unfortunately... Don't know about the new typeahead plugin...
不幸的是，还没有用 IE 测试过......不知道新的 typeahead 插件......
