How can I autoselect the first option in Twitter typeahead.js

Question

Please note that this is for Twitter typeahead.js which is not the same as boostrap typeahead (which has been removed from Bootstrap in 3.0)

According to this issue on Github the feature has been added, but I can not see how to implement it.

I have tried

autoselect: 'first'

and

autoselect: true

Neither seems to work.

Answer 1

Make sure you're using the latest release (> v0.10.0 ). This feature was merged into the master branch on Feb 2, 2014. Here's how you would initialize a typeahead with the autoselect: true option:

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

For more, check out the documentation on initializing the typeahead and the autoselect option .

Answer 2

There is an autoSelect option that about to be merged to master. You can clone the requester's repo and use it immediately (working great for me).

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

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

Answer 3

I honestly couldn't make autoselect option work, besides I needed to implement it in a way that it autoselects the first option ONLY IF I HAD ONE RESULT from the source.

This worked for me:

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

Answer 4

I used a dirty trick, I just added empty element as First Item, works like a charm...

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

Which look like this...

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

In my case I'm populating the data in PHP.

You may wanna do some checking in the onSelect event, if it requires in your case.

Hope this helps.

Answer 5

Tested on version 0.11.1 for ajax requests to autoselect the first option, only when 1 result is returned

The code hooks the return from the ajax request, if the return is only 1 item it will tell the typeahead the request failed ( preventing the list from opening ) and manually set the result

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,
    }
);