javascript - jQuery 自动完成 - 单击提交按钮不算作 "change"

Question

是的，这确实是我关于 jQuery UI 自动完成的第三个或第四个问题。我最近的烦恼是单击表单中的“提交”按钮似乎不算作 jQuery 的“更改”。当我的输入框发生变化时，jQuery 会运行一些 javascript 来强制匹配可接受的输入及其值的列表:

jQuery("#Resource").autocomplete({
   source: function( request, response ) {
    var matcher = new RegExp(jQuery.trim(request.term).replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), "i" );
    var matches = jQuery.grep(resources, function(value) {
     return matcher.test( value.label || value.value || value );
    });
    response(matches.length ? matches : [{ label: "No Result Found", value: "" }]);
   },
   focus: function(event, ui) {
    jQuery('#Resource').val(ui.item.label);
    return false;
   },          
   select: function(event, ui) {
    jQuery('#Resource').val(ui.item.label);
    jQuery('#EmployeeNumber').val(ui.item.value);
    return false;
   },
   change: function(event,ui) {
    for(var i in resources){
     jQuery('#EmployeeNumber').val("");
     if(resources[i].label.toLowerCase()==jQuery('#Resource').val().toLowerCase()) {
      jQuery('#EmployeeNumber').val(resources[i].value);
      break;
     }
    }
   }

  });

如果 EmployeeNumber(隐藏)输入已经有一个值，输入一个无效的名字，然后在输入框上按 Tab 键或单击关闭会清除这个值，但是如果您改为立即点击表单 Submit 按钮，它似乎不算作“更改”，POST 数据包含之前的 EmployeeNumber 值 - 使不正确的输入“有点”正确!

有什么方法可以让 jQuery 识别出单击“提交”也是一个更改，或者有什么方法可以让 Submit 按钮通知 jQuery 资源输入已经被点击掉了？

更新:

最后，我通过使用我认为相当 hacky 的方法解决了这个问题 - 我放弃了自动完成框的“更改”事件，并在用户单击提交时手动匹配我自己。它现在的工作方式是，如果用户通过单击自动完成下拉菜单选择姓名，EmployeeNumber 值将由自动完成 jQuery 代码填充。如果用户只是键入一个名称并点击提交，那么匹配将由 forceCheck() 函数完成。当然，无论是否有第二个相同的名字，这个函数都会自动匹配名字，但不幸的是，在我见过的最奇怪怪癖中，结束后的任何代码即使在循环中没有“return”语句，for 循环的一部分不会被执行。循环结束后，提交请求继续......这很奇怪。

<fieldset class="submit">
    <input id="Submit" name="Submit" type="Submit" class="Submit" value ="Submit" onclick="document.getElementById('Resource').value = jQuery.trim(document.getElementById('Resource').value);forceCheck();"/>
</fieldset>

...


<script type="text/javascript">

    ...

    // Force a resource name check when the user hits the submit button. Necessary because if user changes Resoruce
    // input then hits submit directly (no click or tab off), the jQuery 'change' event (see below) isn't fired
    // until *after* the submit button has begun processing, which is too late.
    function forceCheck() {
        for(var i in resources) {
            document.getElementById("EmployeeNumber").value = "";
            if(resources[i].label.toUpperCase() == document.getElementById("Resource").value.toUpperCase()) {
                document.getElementById("EmployeeNumber").value = resources[i].value;
                return;
            }
        }
    }

    jQuery(function(){
        jQuery("#Resource").autocomplete({
            source: function( request, response ) {
                var matcher = new RegExp(jQuery.trim(request.term).replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), "i" );
                var matches = jQuery.grep(resources, function(value) {
                    return matcher.test( value.label || value.value || value );
                });
                response(matches.length ? matches : [{ label: "No Result Found", value: "" }]);
            },
            focus: function(event, ui) {
                jQuery('#Resource').val(ui.item.label);
                return false;
            },          
            select: function(event, ui) {
                jQuery('#Resource').val(ui.item.label);
                jQuery('#EmployeeNumber').val(ui.item.value);
                return false;
            },  
        });
    }); 
</script>

如果有人知道比这更好的方法，我将非常感谢您的回答 - 或者如果您知道为什么我的 forceCheck 函数的其余部分可能无法运行...否则，我将发布这篇文章作为我自己的答案明天提问，并尽可能接受(我相信是在 2 天后)。

最终更新:

好吧，已经超过 24 小时(相当多)，所以我将我的解决方案作为“答案”发布了。如果仍然没有其他答案，我会再过几天再接受。

Answer 1

更改处理程序调用延迟(提交后)的原因是自动完成是异步编码的(有很多 setTimeout(...))。在模糊事件发生 150 毫秒后调用更改事件。

我的解决方案也有点老套，但您可以将自动完成代码与提交分开。如果以更同步的方式重写自动完成小部件，这也很容易删除。

$("#mysubmit").click(function (event) {
//Wait for autocomplete to change value
    setTimeout(function() {
        //Do submit
        ...
    }, 250 ); //Make sure delay is greater than 150 ms, as in autocomplete widget.
    event.preventDefault(); //Don't submit now
});