Typeahead.js: Option for Automatic selection of the first item in the typeahead resultset

[RoyLee]

Would it be possible for there to be an option for the first item to be automatically selected in the typeahead on search so a press of the enter key will go to that specific item's url? This would save the user needing to press the downarrow key to get to that first item and then pressing the enter key. Thanks!

[jharding]

I don't know if we'll ever add anything like this as I think this behavior would be potentially confusing to the end-user. You may be able to implement this behavior after v0.9 is released, but it'd be based on custom events and not a configurable option.

[RoyLee]

Thanks for responding on this! Some of the bigger websites (eg facebook) use this, and jQuery UI autocomplete has this as an option as well. Looks like i'll have to play around with typeface v.9+.

[bodinsamuel]

I agree with jharding, but in some case it could be great to have the option.
ie: when the user typed his query and there is only one item left in the list. The user still have to select the line (most basic user don't really use tab)

[scott-laursen]

A use case I need to support is to have a generic "Search for _< typed input >_" entry as the first item. It would make sense that this item is selected by default.

[ustun]

I outlined a workaround in #142. Also, see #141 for adding the generic "Search for" entry.

[stayce]

+1

[nagiek]

If you're interested, I implemented this in a fork.

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

[staabm]

:+1: for an option

[tbaddade]

:+1:

[sjlu]

+1

[Jellyfishboy]

+1

[jelen07]

@nagiek Hi, please where exactly is it implemented?

[jharding]

No ETA, this isn't very high priority for me. I would consider accepting a pull request for this issue though.

[sjlu]

We added functionality to typeahead on our own.
https://github.com/UrbanCompass/typeahead.js

We use it like:

    searchBox.typeahead({
      name: 'neighborhoods',
      local: neighborhoods,
      minLength: 0,
      limit: Infinity
   })

But our version is no where near pull-request quality.

[jharding]

What would be a good name for this option?

[staabm]

autoselect: 'first'

[nathanjones]

Sjlu,

Both your auto-selecting the first option and the allowing minLength of 0 look really useful.

I would love to see a pull request for both.

[sjlu]

It's very hacky, we'll make it a little more beautiful then submit a pull request.

Just need time to do so ;)

[jharding]

You may not have to submit a pull request as an autoselect option has been added to v0.10 and I also added the ability to render default suggestions, although not by using minLength: 0.

[Nitrodist]

+1

[aDaneInSpain]

Please add this to the documentation

[reywright]

Is this available for use yet in 0.3.2? I don't see an autoselect anywhere in the source.

[simplenotezy]

+1

[jeffbowen]

Sounds like the current ETA for v0.10 is early January (https://twitter.com/JakeHarding/status/405450330109775872). Thanks, @jharding!

[NicoJuicy]

Second that, thanks @jharding

[simplenotezy]

I have found a quick-fix untill the real update is out there:

        $('.your-typeahead').on('keydown', function(event) {
            // Define tab key
            var e = jQuery.Event("keydown");
            e.keyCode = e.which = 9; // 9 == tab

            if (event.which == 13) // if pressing enter
                $('.your-typeahead').trigger(e); // trigger "tab" key - which works as "enter"
        });

[rahulcap]

I believe that when autoselect: true, that the 1st item should also have the tt-cursor class to indicate it is selected. I opened an issue to track this, but was not sure if there was a way to put it in v0.10 milestone - https://github.com/twitter/typeahead.js/issues/567

Atleast, this is the way all other typeahead/autocomplete plugins work that have an option to "autoselect" or "selectFirst".

[alstephan]

This works for me, until a fix is submitted. Basically triggers the 'down arrow' followed by 'Enter' to select the first item in the list.

$('.typeahead').on('keydown', (event) ->
    e = jQuery.Event("keydown")
    e.keyCode = e.which = 40

    if (event.which == 13)
        event.stopPropagation()
        $('.typeahead').triggerHandler(e)
        e.keyCode = e.which = 9             
        $('.typeahead').triggerHandler(e)
)

[gdibble]

the autoselect:boolean feature is still undocumented

[franklinjavier]

\o

var $tautocomplete = $('#scrollable-dropdown-menu .typeahead');
$tautocomplete.typeahead({
  autoselect: true
},{
  name: 'countries',
  displayKey: 'name',
  source: countries.ttAdapter()
}).on('keyup', function(){

  var keyCode = e.keyCode || e.which;

  if ( keyCode !== 40 && keyCode !== 38 ) {
    $('.tt-dataset-states .tt-suggestion').first().addClass('tt-cursor');
  }

});

[DanielApt]

Would be great if this were documented!

[legshooter]

+1 for updating documentation

[simplenotezy]

what? documentation updated? i cant figure this one out..

[DanielApt]

There's no mention of autoselect in the documentation.

The documentation can be found here

Happy to contribute once I get home.

[simplenotezy]

Also the autoselect feature really needs the add "tt-cursor" so the user actually knows, "autoselect" is enabled.

[legshooter]

I was afraid it was not being maintained anymore, until I bumped into this:
https://twitter.com/falkowski/status/556138762494046208
Well, still worrying, but at least there's hope :)

[DanielApt]

@canfiax Sure, that's the next thing to do. Let's open a new issue for that feature.

[PierBover]

Is autoselect: true working?

I'm using it but nothing happens.

[DanielApt]

@PierBover Yes, it works for me. I'm using v0.10.5. Could you share some code?

[simplenotezy]

It should work fine. But remember that the CSS-class that highlights the first selection is not added, which is why you might think it does not work.

[PierBover]

Should a typehead:selected event be dispatched?

[vlada79]

It would be great if there was an option to make 'Enter' behave same as 'Tab' (to autocomplete with first match). Something like: http://getbootstrap.com/2.3.2/javascript.html#typeahead

[dessalines]

I just tried doing this with autoselect: true, but it doesn't work(I'm on .11.1). This issue is closed, but I still don't see the correct way its supposed to work.

Edit, ah, it looks like this feature was removed in .11.1, and so this issue should be reopened. I'll try one of the workarounds until then.

[dessalines]

Here's a good workaround, that automatically selects the first so that enter works:

}).bind('typeahead:render', function(e) {
    $('#search_form').parent().find('.tt-selectable:first').addClass('tt-cursor');
});

[adileo]

+1 not working autoSelect: true

[eugenioclrc]

+1 to @tchoulihan solution;
https://github.com/twitter/typeahead.js/issues/32#issuecomment-154461777

[jkrth617]

so not sure if this is still a problem for other people but it was for me... I ended up forcing the situation by using a globally scoped variable

I am using version 0.11.1

these are the additional events i added to the standard issue select and auto complete events

                .on('typeahead:render', (e,firstOption) => {
                    if (!!firstOption) {
                        enterSelection = firstOption
                    } else {
                        enterSelection = undefined;
                    }
                }).on('keypress', (e) => {
                    if (e.which == 13 && enterSelection) {
                        $('#typeahead').typeahead('val', enterSelection.value);
                        (this.onDataSelect || _.noop)({ selection: enterSelection });
                        $('#typeahead').typeahead('close');
                    }
                });

things to note. I used an id of "typeahead" and not a class, the global variable i used was enterSelection

I ended up getting the enter button to act exactly like the tab button

[eugenioclrc]

Thanks for the help! after seeing that the last commit in typeahed was two
years ago i think i will keep working with select2

2016-10-10 19:07 GMT-03:00 jake roth [email protected]:

so not sure if this is still a problem for other people but it was for
me... I ended up forcing the situation by using a globally scoped variable

I am using version 0.11.1

these are the additional events i added to the standard issue select and
auto complete events

            .on('typeahead:render', (e,firstOption) => {
                if (!!firstOption) {
                    enterSelection = firstOption
                } else {
                    enterSelection = undefined;
                }
            }).on('keypress', (e) => {
                if (e.which == 13 && enterSelection) {
                    $('#typeahead').typeahead('val', enterSelection.value);
                    (this.onDataSelect || _.noop)({ selection: enterSelection });
                    $('#typeahead').typeahead('close');
                }
            });

things to note. I used an id of "typeahead" and not a class, the global
variable i used was enterSelection

I ended up getting the enter button to act exactly like the tab button

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/twitter/typeahead.js/issues/32#issuecomment-252758952,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAUSinmV2Bswo9mBe22MVoEnYYGziatpks5qyrcggaJpZM4Ac5Fx
.

_May the source be with you._

[sridharkalaibala]

I combined above mentioned solution. This selects in single "Enter" key.

             $('#supplier').typeahead({
                    highlight: true,
                    minLength: 1
                },
                {
                    name: 'supplier',
                    source: suppliers,
              }).on('keydown', function(e){
                var e = jQuery.Event("keypress");
                e.keyCode = e.which = 9; // 9 == tab
                if (event.which == 13) // if pressing enter
                    $(this).trigger(e); // trigger "tab" key - which works as "enter"

            }).bind('typeahead:render', function(e) {
                $('#supplier').parent().find('.tt-selectable:first').addClass('tt-cursor');
            });

[Artistan]

https://codepen.io/Artistan/pen/LywrXj

This makes a dataset based on the current input query be the first option.