Question

是的，这确实是关于jQuery UI Autocomplete的第三个或第四个问题。我最近的烦恼是单击表单中的“提交”按钮似乎不算作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（隐藏）输入已有值，则输入无效名称然后选中或单击输入框将清除此值，然而如果您立即点击表单{{ 1}}按钮，它似乎不算作“更改”，Submit数据包含以前的EmployeeNumber值 - 使得应该是错误的输入“排序”正确！

是否有某些方法可以让jQuery认识到单击“Submit”也是一个更改，或者某种方式我可以通过POST按钮通知jQuery Submit输入被点击了？

更新：

最后，我通过使用我认为相当愚蠢的方法解决了这个问题 - 我放弃了自动完成框的'更改'事件，并在用户点击提交时手动匹配自己。它现在的工作方式是，如果用户通过单击自动完成下拉菜单选择名称，则EmployeeNumber值将由自动完成的jQuery代码填充。如果用户只输入名称并点击提交，则匹配将由forceCheck（）函数完成。当然这个函数会自动匹配第一个名字，无论是否有第二个相同的名字，但遗憾的是看起来像我见过的最奇怪的怪癖，结束后的任何代码即使循环中没有'return'语句，for循环也会 not 执行。循环完成之后，提交请求就会继续......这非常奇怪。

Resource

如果有人知道比这更好的方法，我会非常感谢你的答案 - 或者如果你知道为什么我的forceCheck功能的剩余部分可能无法运行...否则，我会发布这篇文章作为我自己的回答明天的问题，并在我可以接受的时候（2天之后，我相信）。

最终更新：

嗯，已经超过24小时（相当多），所以我把我的解决方案作为“答案”发布了。如果仍然没有其他答案，我会再花几天时间接受它。

Answer 1

更改处理程序被调用到晚（提交后）的原因是自动完成是异步编码的（带有很多setTimeout（...））。变化事件在模糊事件后150毫秒被调用。

我的解决方案也有点hacky，但您可以将自动完成代码与提交区分开来。如果以更加同步的方式重写autocomplete-widget，这也很容易删除。

$("#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
});

Answer 2

我知道这是旧的，但这是我在尝试解决同样的问题时最终的结果，我认为我有一个独特的解决方案。它肯定不是一个完美的解决方案，因为它涉及访问“私人”功能，但它可以工作（到目前为止），它看起来更清洁。

我在提交之前强制触发更改事件：

$('#yourAutoCompleteForm').submit(function() {
    $('#yourAutoCompleteInput').data("autocomplete")._change();
    //the rest of your submit
}

我的提交继续验证我的更改回调设置的自定义属性。他们可能共享一个范围，只使用var ...

Answer 3

据我所知，大约一年过去了一个问题，但我遇到了同样的问题。我现在使用的是jquery ui 1.8.13。我这样解决问题：

var acinaction = false;  // autocomlete in edit stage flag
var needsubmit = false;  // submit action asked
jQuery("#Resource").keypress(function(event) {
    // if any key pressed then we set autocomplete in edit stage flag
    if (event.which == '13') {
        event.preventDefault();
    }
    acinaction = true;
}).autocomplete({
   select: function(event, ui) {
        // user choose an item from dropdown menu
        // do validation here if necessary
        ...
        // unset autocomplete in edit stage flag
        acinaction = false;
    },
    change: function(event,ui) {
        if( acinaction ) {
            // user input some characters into input field and move focus away
            // without choosing any items from dropdown menu
            // may be clicking submit button
            // do validation here if necessary
            ...
            acinaction = false;
            if( form_is_valid && needsubmit ) {
                // if submit flag is set then try submit again
                JQuery('#Form').submit();
            }
        }
    }
});
JQuery('#Form').submit(function() {
    // if autocomplete in edit stage then cancel form submition
    if( acinaction ) {
        needsubmit = true;
        return false;
    }
    // autocomplete change event is done here
});

代码很难看，但应该表明这个想法。

Answer 4

显然，jquery-ui 1.8.4 那种解决了这个问题（见changelog）：

修正：组合框/自动完成没有除非控制失去焦点，否则保存值

你能测试一下吗？因为它对我不起作用。

Answer 5

我有办法解决这个问题，

首先，将此脚本添加到您的

$('#your_form:input').change(function(){
   $('#your_form').data('changed',true);
});

然后在提交中单击validataion脚本，添加如下脚本，

 if(!$('#your_form').data('changed'))  return false;

我发现它确实有效但我认为这不是最好的方式。

抱歉，这是一种解决方法。

Answer 6

要了解Tvartom的回答，这就是我在页面加载代码中的内容：

$('form').submit(function(event) {
  var form = $(this);
  if (form.find('.ui-autocomplete-input').length &&
      !form.data('already-submitted')) {
    // delay the submit by 250 ms
    form.data('already-submitted', true);
    setTimeout(function() {
      form.submit();
      form.data('already-submitted', false);
    }, 250);
    event.stopImmediatePropagation();
    return false;
  }
});

这会自动应用于所有具有自动填充输入的表单。但是，您需要小心其他表单提交事件回调 - 您需要检查form.data('already-submitted')是否为假，不执行任何操作。

Answer 7

可以添加

submit: function(event,ui) {
// same thing as your change:
}

Answer 8

使用blur代替change。就我而言，它有效！

jQuery自动完成 - 单击提交按钮不算作“更改”

8 个答案: