如何自动选择 Twitter typeahead.js 中的第一个选项答案

【问题标题】：How can I autoselect the first option in Twitter typeahead.js如何自动选择 Twitter typeahead.js 中的第一个选项
【发布时间】：2013-09-10 12:35:29
【问题描述】：

请注意，这是针对 Twitter typeahead.js 的，它与 boostrap typeahead 不同（在 3.0 中已从 Bootstrap 中删除）

根据this issue on Github的说法，该功能已添加，但我看不到如何实现。

我试过了

autoselect: 'first'

和

autoselect: true

似乎都不起作用。

【问题讨论】：

你有想过这个吗？
该功能尚未合并到 github 上的 master 分支中，它计划在 v0.10.0 版本中并在此分支上可用：github.com/jharding/typeahead.js/tree/32-enter-autoselect

标签： javascript twitter-bootstrap typeahead.js

【解决方案1】：

确保您使用的是latest release (>v0.10.0)。此功能已于 2014 年 2 月 2 日合并到 master 分支中。以下是使用 autoselect: true 选项初始化 typeahead 的方法：

$('.typeahead').typeahead({
  autoselect: true
},
{
  name: 'my-dataset',
  source: mySource
});

有关更多信息，请查看 initializing the typeahead 和 autoselect option 上的文档。

【讨论】：

拥有它真的很好，但对我不起作用（尝试使用 v0.10.2）。此外，您链接的文档没有提到 autoselect 选项。不得不为此想出我自己的技巧......
它对我有用。第一项在您键入时不会突出显示，但会在您按 Enter 时被选中。

【解决方案2】：

有一个 autoSelect 选项即将合并到 master。您可以克隆请求者的存储库并立即使用它（对我来说非常有用）。

https://github.com/twitter/typeahead.js/pull/1356

https://github.com/hongz1/typeahead.js

【讨论】：

【解决方案3】：

老实说，我无法使自动选择选项起作用，除了我需要以一种仅当我从源获得一个结果时自动选择第一个选项的方式来实现它。

这对我有用：

...
success: function(data) {
                        process(data);
                        if (data[0] != null) {
                            $(".tt-dropdown-menu .tt-suggestion").trigger("click"); //autoselect the first element.
                        }
                    }
...

【讨论】：

这引导我找到解决方案的正确方向，请注意它不是新版本的解决方案。

【解决方案4】：

我使用了一个肮脏的技巧，我只是添加了空元素作为第一项，就像一个魅力......

var typeaheadSource = [{ id: 0, firstName: " | | "}, <?php print $product_list; ?>];

看起来像这样...

var typeaheadSource = [{ id: 0, firstName: " | | "}, { id: 1, firstName: "Coca Cola 1.5L | 9555589200415 | 0.00"}];

在我的例子中，我在 PHP 中填充数据。

如果您的情况需要，您可能想要检查 onSelect 事件。

希望这会有所帮助。

【讨论】：