JQuery autocomplete: return to return submit form

Question

I am using jQuery Autocomplete plugin.

// I'm not sure if there a better way to do this var base_url = window.location.href.slice(0, window.location.href.indexOf('/bar')); $('.foo-widget').find('input:first-child').autocomplete(base_url + "/api/baz?format=newline"); 

Markup:

 <ul class="foo-widget"> <li> <input value="" autocomplete="off" class="ac_input"><input value="" autocomplete="off" class="ac_input"><button>Add</button> </li> </ul> 

It works great. However, when I hit enter to select an item from the autocomplete results, the form is submitted. Why can this happen?

I looked through jquery.autocomplete.js and saw that the following is executing:

  case KEY.RETURN: if( selectCurrent() ) { // stop default to prevent a form submit, Opera needs special handling event.preventDefault(); blockSubmit = true; return false; } break; 

Should event.preventDefault() and blockSubmit = true stop blockSubmit = true form? Is it possible that the JS code that I have elsewhere on the page is interfering?

Answer 1

I would recommend adding a keypress event in the Autocomplete element and return false from this. This will not affect your ability to submit the rest of the form later.

Answer 2

You want to disable sending on input by connecting an event handler for form.submit: $ ("form"). submit (function () {return false;});