如何在Twitter typeahead.js中自动选择第一个选项

Question

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

根据this issue on Github添加了该功能，但我看不清楚如何实现它。

我试过了

autoselect: 'first'

和

autoselect: true

似乎都没有效果。

Answer 1

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

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

有关详情，请查看initializing the typeahead和autoselect option上的文档。

Answer 2

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

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

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

Answer 3

老实说，我不能让autoselect选项工作，除了我需要以一种方式实现它，它只有在我从源头获得一个结果时自动选择第一个选项。

这对我有用：

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

Answer 4

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

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事件中进行一些检查。

希望这有帮助。