0

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

4

1 回答 1

0

如果它必须在列表中，则应使用组合框功能。基本语法是：

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

您可以在http://jqueryui.com/autocomplete/#combobox了解有关如何使用它的更多信息

于 2013-04-30T19:44:37.260 回答