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

Question

请注意，这是针对Twitter的typeahead.js，与已在Bootstrap 3.0中移除的boostrap typeahead不同。

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

我已经尝试过。

autoselect: 'first'

和

autoselect: true

两者似乎都不起作用。

- Søren Beck Jensen

---

该功能尚未合并到Github的主分支中，计划在v0.10.0版本中推出，并可在以下分支中使用：https://github.com/jharding/typeahead.js/tree/32-enter-autoselect - Hieu Nguyen

Answer 1

请确保您使用的是最新版本（>v0.10.0）。该功能于2014年2月2日合并到主分支。以下是如何使用autoselect: true选项初始化typeahead：

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

更多内容请参阅关于 初始化 typeahead 和 autoselect 选项 的文档。

- Jeff Bowen

---

很想拥有这个功能，但对我无效（已尝试使用v0.10.2）。此外，您提供的文档中未提及“autoselect”选项。不得不自己想办法解决... - svub

它对我有效。当您输入时，第一项不会被突出显示，但在按下Enter键后将被选中。 - Bassem

Answer 2

说实话，我无法让自动选择选项起作用，除此之外，我需要以一种方式实现它，即仅在源中有一个结果时才自动选择第一个选项。

这对我有用：

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

- Silvestre

---

这引导我朝着解决方案的正确方向前进，只是请注意它不是较新版本的即插即用解决方案。 - DiamondDrake

Answer 3

有一个自动选择选项即将合并到主分支。您可以克隆请求者的存储库并立即使用它（对我来说效果很好）。

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

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

- aerickson

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

希望这可以帮到你。

- Nesar

Answer 5

已在版本0.11.1上进行测试，用于ajax请求以自动选择第一个选项，仅当返回1个结果时

该代码挂钩ajax请求的返回，如果返回只有1个项目，则会告诉typeahead请求失败（防止列表打开）并手动设置结果

const $field = $( '#auto_complete' );

const bloodhound = new Bloodhound( {
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: `remoteUrl?&q=%QUERY`, // Set the proper URL...
        wildcard: '%QUERY',
        rateLimitWait: 500,
        cache: false,
        transport: ( settings, onSuccess, onError ) =>
        {
            return $.ajax( settings )
                .done( ( data, textStatus, jqXHR ) =>
                {
                    if ( data.length === 1 )
                    {
                        onError( jqXHR, 'abort', '' ); // Pretend the request failed
                        $field.val( data[0].code ) // Set the value in the input, don't use $field.typeahead('val', results[0].code);
                        $field.blur();
                        $field.trigger( 'typeahead:select', [ data[0] ] ); // Simulate the user selecting the option
                        return;
                    }

                    onSuccess( data, textStatus, jqXHR );
                } )
                .fail( onError );
        }
    }
} );

$field.typeahead(
    { /* .. options...*/ },
    {
        source: bloodhound,
    }
);

- antman3351