jQuery UI autocomplete combobox - prevent form submit

Question

I'm using the nifty 'combobox' variant of jQuery UI Autocomplete - see here: http://jqueryui.com/demos/autocomplete/#combobox

I have it within a Form element because its part of a form.

The Autocomplete Combobox has a <button> that is used to show the whole drop down list. However when the user presses it, the form submits. This appears to be because the <button> has a type="submit" attribute. The whole element is created by the button() call within the .combobox fn, see source code.

How do I stop it submitting?

(NB: This guy had the same problem but he fixed it by removing the form - I can't do that)

Answer 1

Ah, nevermind, I figured it out.

The problem is discussed on the jQuery forum here: http://forum.jquery.com/topic/autocomplete-combobox-problem-when-it-is-placed-inside-a-form-tag

They suggest several different ways of adjusting the source code of the autocomplete combo to fix it. The simplest one seems to be this:

Change the line that says

$("<button>&nbsp;</button>") 

to

$("<button type=\"button\">&nbsp;</button>")

this prevents the type="submit" from being inserted into the final button.