12

I've got a form that uses the jquery autocomplete UI plugin, http://jqueryui.com/demos/autocomplete/, which all works sweet except when you press the enter key to select an item in the autocomplete list, it submits the form.

I'm using this in a .NET webforms site, so there may be javascript handling associated with the form that .NET is injecting that is overriding the jQuery stuff (I'm speculating here).

Mick Byrne
  • 14,394
  • 16
  • 76
  • 91

7 Answers7

14

You can use an event handler on it.

$("#searchTextBox").keypress(function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if(code == 13) { //Enter keycode
        return false;
    }
});

see: jQuery Event Keypress: Which key was pressed?

also: http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/javascript-char-codes-key-codes.aspx for list of keycodes

Community
  • 1
  • 1
mnsr
  • 12,337
  • 4
  • 53
  • 79
  • Good Example! Try too `... if (code == $.ui.keyCode.ENTER) { return false; } ... `. Look a souce https://api.jqueryui.com/jQuery.ui.keyCode/ .. jzm thanks – KingRider Mar 29 '17 at 19:26
  • jQuery normalizes `e.which`, so `var code = e.which` will suffice. So this can be simplified to `if (e.which === 13) return false;` or even `return e.which !== 13;` – jbyrd May 22 '19 at 12:54
5
$("#autocomplete_field_id").keypress(function(event){
  var keycode = (event.keyCode ? event.keyCode : event.which);
  if (keycode == '13') {
    event.preventDefault();
    event.stopPropagation();    
  }
});
ace
  • 7,293
  • 3
  • 23
  • 28
4

One way is to handle key press and ignore it if it is the enter key.

Johnie Karr
  • 2,744
  • 2
  • 35
  • 44
  • 1
    But I only want to ignore the enter key if it is pressed when selecting an option from the autocomplete list. If the user is not focused on the list of autocomplete options then I _do_ want the form to submit. – Mick Byrne Aug 30 '11 at 00:15
3

You could try this:

<input id="MyTextBox" type="text" onkeydown="return (event.keyCode!=13);" />

This will disable the Enter key only on the input text box

Sandman
  • 31
  • 2
  • 1
    This is a great solution: you are not messing with the autocomplete code or event jQuery at all: just dump the return key. Thanks! – Chris Adams Jun 24 '20 at 15:58
2

If you still want the enter key to submit, after the autocomplete selection is made,

if (evt.keyCode === 13 && !$('.ui-autocomplete').is(':visible')) {
   $('.ui-button:first').click();
}
evt.stopPropagation();
Xs10tial
  • 143
  • 2
  • 10
  • 3
    This one doesn't work for me, because the when the event gets to my callback function, autocomplete is already not visible. – Arman Bimatov Oct 10 '13 at 21:42
2

The answer ace post helped me solve my problem. While you should notice that the code ace provide must exist before $('input').autocomplete(*****), otherwise you would not receive any effect.

Barry Kaye
  • 7,682
  • 6
  • 42
  • 64
SalutonMondo
  • 629
  • 9
  • 17
0

One line of code:

$("#searchField").on('keypress', (event) => event.which !== $.ui.keyCode.ENTER);

3 things that are different here than the accepted answer:

  1. jQuery normalizes event.which, so no need to test for event.keyCode and event.which.
  2. Since you're obviously using jQuery UI, you have access to named key codes via $.ui.keyCode, which makes it more readable.
  3. The ES6 arrow function syntax further simplifies the code.
jbyrd
  • 5,287
  • 7
  • 52
  • 86