Typeahead submit with enter

Question

I'm using bootstrap typeahead and I'm wondering, how do I make it submit when clicking the enter button? In other words, if I typed "hello" into the typeahead input and pressed enter, how would I submit "hello"?

I've already made it so that the typeahead doesn't auto-select the first result.

This is my code:

<form method="POST" action="script.php">
    <input name="typeahead_field" class="typeahead" data-provide="typeahead" autocomplete="off" type="text">
</form>

jQuery:

$('.typeahead').typeahead({
    items: 10,
    source: function (query, process) {
        $.ajax({
            url: 'typeahead.php',
            type: 'POST',
            dataType: 'JSON',
            data: 'query=' + query,
            success: function(data) {
                process(data);
            }
        });
    },
    highlighter: function(data) {

        // code that returns each result

        return html;
    },
    updater: function(data) {
        // code that redirects the user if they click the selection
    },
});

Please help!

JuanXarg · Answer 1 · 2016-11-14T01:09:38.033

2

Old question, but worth answering. Here is a possible solution:

$('.typeahead').on('keydown', function(e) {
  if (e.keyCode == 13) {
    var ta = $(this).data('typeahead');
    var val = ta.$menu.find('.active').data('value');
    if (!val)
      $('#your-form').submit();
  }
}

EDIT: First attempt was very naive :)

edited Nov 14 '16 at 01:09

answered Nov 14 '16 at 00:45

JuanXarg

428
2
11

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

You need a submit button to enable submit on enter. You can hide the button with this CSS:

<input type="submit" style="position: absolute; left: -9999px">

(from https://stackoverflow.com/a/477699/759971)

edited May 23 '17 at 12:16

Community

1
1

answered Jan 21 '14 at 00:18

Sanjo

1,240
9
11

score 0 · Answer 3 · answered Jul 05 '21 at 19:04

0

works well, but doesn't highlight selection like mouse-over event does. Maybe this solution would work better as seems to encapsulate the gist of previous answer. https://bwbecker.github.io/blog/2015/08/29/pain-with-twitter-typeahead-widget/

answered Jul 05 '21 at 19:04

ajm0824

45
1
6

StackOverflow generally prefers answers that are more than just a link (or a link with just a sentence or two to recommend it). – Tom Jul 05 '21 at 20:25

Typeahead submit with enter

3 Answers3