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

Question

请注意，这适用于 Twitter typeahead.js，它与 boostrap typeahead 不同（在 3.0 中已从 Bootstrap 中删除）

根据Github 上的这个问题，该功能已添加，但我看不到如何实现它。

我努力了

autoselect: 'first'

和

autoselect: true

两者似乎都不起作用。

Answer 1

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

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

有关更多信息，请查看有关初始化 typeahead和autoselectoption的文档。

Answer 2

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

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

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

Answer 3

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

这对我有用：

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

Answer 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 事件。

希望这可以帮助。