Autocomplete Change Event firing after button click - jquery-ui

Question

I am using the JQuery UI Autocomplete. I needed it to MustMatch so I set it up like this:
$('#MyAutoComplete').autocomplete({
source: result,
minLength: 1,
change: function (event, ui) {
if (!ui.item) {
$('#MyAutoComplete').val('');
}
}
});
Don't worry about the result as the field is populated and is working as expected. When someone types in a value not in the list and clicks off the field, the field gets erased as I wished--except when I click a submit button. A simplified version of my submit handler is:
$('#MyButton').get(0).onclick = $('#MyForm').get(0).onsubmit = (function () {
$('#MyForm').validate();
var isValid = $('#MyForm').valid();
if (!isValid) {
return false;
}
});
If I click directly from the focused AutoComplete with bad data to the submit button, the submit event happens before the change for the AutoComplete. So the bad data gets submitted. Any other action clears the bad data which causes the submit to fail (because the field is required).
Any ideas how to get around this?
I have tried adding each of these to the top of the submit event. None made a difference.
$('#MyAutoComeplete').data('autocomplete')._trigger('change');
$('#MyAutoComplete').blur();
$('#MyButton').focus();
Does the combobox feature require a higher version of the script then I am using? If I take this:
$('#MyAutoComplete').autocomplete({
source: result,
minLength: 1,
change: function (event, ui) {
if (!ui.item) {
$('#MyAutoComplete').val('');
}
}
});
And turn it into this:
$('#MyAutoComplete').combobox({
source: result,
minLength: 1,
change: function (event, ui) {
if (!ui.item) {
$('#MyAutoComplete').val('');
}
}
});
I get this error:
JavaScript runtime error: Object doesn't support property or method 'combobox'
I am using:
jQuery UI 1.8.7

Answer 1

If it must be in the list, you should use the combobox functionality. The basic syntax is:
<select id="combobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
</select>
<script>
$(function() {
$( "#combobox" ).combobox();
});
</script>
You can see more on how to use it at http://jqueryui.com/autocomplete/#combobox