key "Enter" function default action

[klekle]

Hello, I read some issues here and on the internet and people say with this plugin when the user hits enter key while the input is focused it should autocomplete it, but according to the demo page this is not the default behavior and hitting enter has no effect.

I tested the page http://twitter.github.io/typeahead.js/examples/ and in the first field i typed "bra" the only option is "Brazil" so I hit enter hoping it would fill it for me and trigger typeahead:selected for example.

Im using chrome lastest.

Is this correct? or it should work with the enter key?

if this is not the default behavior, could you please point me in the right direction on how to make this work? (hitting enter and choosing the current suggested option).

Thx! great plugin

[julien-c]

See #105

[klekle]

I saw this and I have no problem achieving what I want when the events typeahead:selected and typeahead:autocompleted are called, no problems there.
But imagine this scenario, the user started typing in the input field, the suggestion selected by the plugin appears on the right side of the intermittence, at this time no events are called, the user must either select something with the mouse (selected event will be called) or hit -> or TAB in order to autocomplete.
What I want is that hitting Enter will have the same effect as hitting Tab or the right arrow(to autocomplete).

Sorry for my english!

Thx Julien

[julien-c]

You could try:

• catching the return key keypress events on your input field
• and triggering a tab keypress

[jharding]

Pressing enter will probably never result in an auto-completion, but I'm considering making it result in an auto-selection configurable (see #32).

[klekle]

That would be nice!
Thank you for the reply!
Since its not possible / implemented I will close the issue.

[theoephraim]

@jharding are you sure pressing enter should not result in an auto-completion? What's your reasoning?

Currently the user starts typing, they see the the item they want within the input (as the hint), so they may press enter. Depending on the situation, either nothing happens, or the form gets submitted, which feels totally broken.

I think enter should act the same as the tab key in this case.

[jharding]

@jharding are you sure pressing enter should not result in an auto-completion? What's your reasoning?

When it comes to behavior issues like this, I think it's in the best interest of typeahead.js to follow google.com's lead for the sake of the principle of least surprise. In this case, pressing enter on google.com while in the search input results in the form getting submitted.

[theoephraim]

The usability issue is that in most cases, when I see an input box with something in it and hit enter, I expect the box to retain what I see in it.

Notice on google that when you're typing something short that there is no hint appearing in the search box which means there's no confusion about hitting enter.

When your search string gets long enough, a hint is displayed, but so are the results for that search below. So in that case, you can hit enter to search for exactly what you typed instead of the results already displayed below. I don't think this behavior (showing suggestions like typeahead does AND immediate deeper results for the hinted suggestion) is the most common use case.

So while your reasoning sort of makes sense, I think it would be appropriate to at least make this behavior optional if not the default. In fact, by making the enter key behave the same as the tab key, it still works to submit the form, it just autocompletes first and then submits. I've already made a patch and it feels right.

[jharding]

Take a look at #337 which has already been merged into integration-0.10.0. It adds an autoselect option that basically does what you're suggesting. The only difference is that it results in a selection, not an autocompletion.

[newmana]

Hi,

I overcame this problem by doing the following:

$('input.typeahead').keypress(function (e) {
    if (e.which == 13) {
        var selectedValue = $('input.typeahead').data().ttView.dropdownView.getFirstSuggestion().datum.id;
        $("#value_id").val(selectedValue);
        $('form').submit();
        return true;
    }
});

[acellary]

You may change line
this.select($selectable) && $e.preventDefault();
to
this.select($selectable);
By doing that you won't disable default Enter key function (might be sending a form)

[bpartridge]

The internal API has changed with 0.11.1. The following behavior lets you hit Enter once while the menu is open to select the top match, then (since the menu is now closed since you have an exact match, under standard tokenization assumptions), if you hit Enter again it allows you to submit a form.

5 years is a long time :)

$('.thing-you-called-typeahead-on').on('keypress', function(evt) {
      if (evt.which == 13 /* ENTER */) {
        const typeahead = $(this).data().ttTypeahead;
        const hintText = typeahead.input.$hint.val();
        const menu = typeahead.menu;
        const sel = menu.getActiveSelectable() || menu.getTopSelectable();
        if (menu.isOpen()) {
          menu.trigger('selectableClicked', sel);
          evt.preventDefault();
        }
      }
    });