自動完成更改按鈕單擊後發生事件觸發

Question

我正在使用JQuery UI自動完成。我需要它MustMatch所以我把它像這樣：

$('#MyAutoComplete').autocomplete({ 
    source: result, 
    minLength: 1, 
    change: function (event, ui) { 
     if (!ui.item) { 
      $('#MyAutoComplete').val(''); 
     } 
    } 
}); 

不要擔心結果作爲字段填充，按預期工作。當某人鍵入一個不在列表中的值並點擊該字段時，該字段會按照我的意願被刪除 - 除非我點擊一個提交按鈕。我提交處理程序的簡化版本是：

$('#MyButton').get(0).onclick = $('#MyForm').get(0).onsubmit = (function() { 

    $('#MyForm').validate(); 
    var isValid = $('#MyForm').valid(); 

    if (!isValid) { 
     return false; 
    } 
}); 

如果我直接從自動完成聚焦不良數據點擊提交按鈕，提交事件自動完成變更之前發生。所以不好的數據被提交。任何其他操作都會清除導致提交失敗的錯誤數據（因爲該字段是必需的）。

任何想法如何解決這個問題？

我已經嘗試將這些添加到提交事件的頂部。沒有任何區別。

$('#MyAutoComeplete').data('autocomplete')._trigger('change'); 

$('#MyAutoComplete').blur(); 

$('#MyButton').focus(); 

---

是否組合框的功能要求更高版本的劇本，然後我使用的？如果我藉此：

$('#MyAutoComplete').autocomplete({ 
        source: result, 
        minLength: 1, 
        change: function (event, ui) { 
         if (!ui.item) { 
          $('#MyAutoComplete').val(''); 
         } 
        } 
       }); 

，把它變成這樣：

$('#MyAutoComplete').combobox({ 
        source: result, 
        minLength: 1, 
        change: function (event, ui) { 
         if (!ui.item) { 
          $('#MyAutoComplete').val(''); 
         } 
        } 
       });   

我得到這個錯誤：

的JavaScript運行時錯誤：對象不支持屬性或方法 '組合框'

我使用：

jQuery UI的1.8.7

Answer 1

如果它必須在列表中，則應使用組合框功能。基本語法是：

<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