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

Question

我正在使用 Twitter 的 typeahead.js（https://github.com/twitter/typeahead.js/）在一个输入字段上，该字段已经通过查询字符串预填充。加载页面后，我想以编程方式触发 typeahead 结果的显示，而不需要用户在表单字段中输入任何内容。

默认情况下，只有当用户手动在输入字段中键入内容时，typeahead.js 才会被触发，而我无法找到 typeahead.js 中可调用以触发结果显示的任何方法。

非常感谢指点。

谢谢！

- zıəs uɐɟəʇs

---

非常感谢大家提供的所有出色答案！我选择了通过触发输入来实现的那个，因为这也强制 typeahead 在显示结果之前搜索关键字（这是我的要求，我意识到这并没有在我的问题中提到）。再次感谢。Stackoverflow 比切片面包好得多。 - zıəs uɐɟəʇs

可以使用“预取”功能。 - Saahithyan Vigneswaran

Answer 1

触发输入似乎可以做到。

$(".typeahead").eq(0).val("Uni").trigger("input");

在示例页面上进行了测试。

- epascarello

---

没有 "Uni"，你能做到吗？ =\ - Alix Axel

@epascarello：触发typeahead.js打开并显示每个预取项，而不仅仅是那些具有“Uni”标记的项。 - Alix Axel

如果有人希望查看typeahead的较新版本，可以使用$(".typeahead").typeahead("setQuery","Uni").focus();。这是因为使用setQuery是设置查询值的首选API方法。 - Pricey

@Pricey：我认为 setQuery 在 0.10 版本中被移除了。我尝试过，但是会出现错误。 - Phil

@Phil 我在他们的文档中已经找不到它了（0.10+），但是它仍然存在于代码中，所以我只是假设它应该在某种程度上仍然得到支持... 我曾在（0.9）中使用它，我的猜测是现在你可以这样做 $('.typeahead').typeahead('val', myVal);。 - Pricey

Answer 2

根据我的测试（请参见fiddle），为了显示下拉菜单，需要使用focus()方法。因此：

theVal = $('.typeahead').val();
$(".typeahead").typeahead('val', '')
$(".typeahead").focus().typeahead('val',theVal).focus();

• 第1行，我们将Typeahead输入框的当前值分配给变量theVal；
• 第2行，我们只是重置了typeahead的计算值；
• 第3行，我们放回原始值和焦点，这导致建议下拉菜单显示，就好像用户已经输入了一些内容。

实际上，我需要强烈鼓励用户从地理编码API调用中来的Bloodhound建议中进行选择，以便在提交表单之前确保客户端获取了坐标。

- Sam_Butler

Answer 3

$(".typeahead").typeahead('lookup').focus();

可以使用现有输入值触发。当然，您也可以事先更改该值。

- webenformasyon

Answer 4

如果您在使用Twitter的typeahead插件0.11.1版本之后遇到问题，以下是我用一行代码解决它的方法：

$(".typeahead-input").typeahead('val', "cookie")
                     .trigger("input")
                     .typeahead('open');

- kcent

Answer 5

从Typeahead v0.10.1开始，更改类型提示的值将触发另一个查询并打开下拉列表。

var val = $(".typeahead").typeahead('val');
$(".typeahead").typeahead('val', '');
$(".typeahead").typeahead('val', val);

- Megan

---

这是唯一一个对我有效的（v0.11.1），除了我不得不将第一行更改为：var val = $（“#original-input-id”）.typeahead（'val'）;其中＃original-input-id是我添加了.typeahead类的输入文本字段的ID。 - Prid

Answer 6

使用：Typeahead v0.10.5 不要使用： $('.typeahead').typeahead('open'); 目前此方法不起作用。来源：https://github.com/twitter/typeahead.js/issues/798。 作为临时解决方案，在您实例化Typeahead之后，请使用自定义的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

- Matt Jensen

---

在所有给出的答案中，这是唯一一个对我有效的。 - OliverM

Answer 7

我使用了 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');
                });
            }
        }
    });

现在只需添加此属性，它将在焦点上触发。

<input typeahead-focus-trigger typeahead="">

- Vall3y

---

trigger('input') 在IE上不起作用，因此将其更新为：对于所有浏览器都使用 trigger('change')。 - Kevin Black

Answer 8

除非您在输入标记的类中故意添加“ typeahead”，否则这些都不起作用。如果您不觉得有必要这样做（它并不是必要的），最好使用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();

- Artif3x

Answer 9

浏览源代码，看起来它在元素数据中存储了一个TypeaheadView对象，并将其键值设为typeahead。这个TypeaheadView对象有一个内部方法_showDropdown，它会在聚焦事件（和其他一些事件）时自动绑定。

我不建议这样做，但您应该能够手动调用该内部方法：

$('#yourTypeaheadElement').data('typeahead')._showDropdown();

或者，您可以尝试在页面加载后（当然，在将其初始化为typeahead元素之后）仅专注于您的typeahead元素：

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

- jbabey

---

这似乎不是针对typeahead*.js*的。 - Alix Axel

Answer 10

这是 @Sam_Butler 的工作的简化版本：http://jsfiddle.net/rimian/hrnf9。

<button type="button" id="button">Crick</button>
<input type="text" id="text" class="typeahead">

Javascript:

$('#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&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()
});

- Rimian

---

这对我非常有效。我已经在文本字段中有一个值，所以我只是将其保存在变量中，清空了typeahead中的val，然后再次设置了先前的值，它就打开了搜索。也许是一种hack，但很好用。 - Olaj