Stop 'enter' key submitting form when using jquery ui autocomplete widget

Question

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

Answer 1

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

Answer 2

$("#autocomplete_field_id").keypress(function(event){
  var keycode = (event.keyCode ? event.keyCode : event.which);
  if (keycode == '13') {
    event.preventDefault();
    event.stopPropagation();    
  }
});

Answer 3

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

Answer 4

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.

Answer 5

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();

Answer 6

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

Answer 7

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.