javascript - How can I autoselect the first option in Twitter typeahead.js - Stack Overflow

admin管理员组

文章数量:1290187

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.

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.

• javascript
• twitter-bootstrap
• typeahead.js

Share Improve this question Follow asked Sep 10, 2013 at 12:35 Søren Beck JensenSøren Beck Jensen 1,67611 gold badge1313 silver badges2323 bronze badges 1

• 1 The feature is not merged into master branch on github yet, it's scheduled for v0.10.0 and available at this branch: github./jharding/typeahead.js/tree/32-enter-autoselect – Hieu Nguyen Commented Sep 16, 2013 at 10:00

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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.

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.
                        }
                    }
...

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./twitter/typeahead.js/pull/1356

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

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.

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_plete' );

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

本文标签： javascriptHow can I autoselect the first option in Twitter typeaheadjsStack Overflow