如何强制jQuery自动完成的常见更改事件？

Question

我使用jQuery UI Autocomplete插件常用方法：

$(function() {
    $("#foo")
        .autocomplete({
            autoFocus : true,
            delay : 500,
            minLength : 0,
            source : function(request, response) {
                $.get(
                    "/order/ajax/foo?"
                    + "data[foo]=" + $('#foo').val(),
                    {},
                    function(data) {
                        response(data.slice(0, 10));
                    }
                );
            }
        }).on('focus', function(event) {
            console.log(new Date());
            console.log($(this));
            $(this).autocomplete("search", this.value);
        });
});

$(function() {
    $("#foo")
        .autocomplete({
            autoFocus : true,
            delay : 500,
            minLength : 0,
            source : function(request, response) {
                $.get(
                    "/order/ajax/bar?"
                    + "data[foo]=" + $('#foo').val()
                    + "data[bar]=" + $('#bar').val(),
                    {},
                    function(data) {
                        response(data.slice(0, 10));
                    }
                );
            }
        }).on('focus', function(event) {
            console.log(new Date());
            console.log($(this));
            $(this).autocomplete("search", this.value);
        });
});

由于不同字段之间存在依赖关系（例如bar上的foo），我想重置/清除依赖字段，当他们的＆＃34; master＆＃34; -fields得到更新时。

$(document).ready(function() {
    fieldFoo = $('#foo');
    fieldBar = $("#bar");
});

function updateFooDependentFields(value) {
    alert('test updateBarDependentFields');
    fieldBar.val('');
}

现在问题：只有在<{1}}中我输入某些内容时，它才有效。如果我仅foo编辑并选择了另一个自动建议的条目，则不会触发focus事件，并且不会清除相关字段（例如change）。为什么呢？

如何强制触发jQuery自动填充的常见更改事件？

解决方法1

可以在自动填充设置中定义bar操作，如下所示：

onChange

但$(function() { $("#foo") .autocomplete({ autoFocus : true, delay : 500, minLength : 0, source : function(request, response) { $.get( "/order/ajax/bar?" + "data[foo]=" + $('#foo').val() + "data[bar]=" + $('#bar').val(), {}, function(data) { response(data.slice(0, 10)); } ); }, // here change: function (event, ui) { updateFooDependentFields(); } }) // or here .on('change', function(event) { updateFooDependentFields(); }) ; }); 事件不是自动完成的具体内容。因此，如果我希望明天删除自动完成功能，我不想记住，它可能会影响与之无关的功能。这就是为什么我正在寻找一种方法来定义change＆＃34;听众＆＃34;在自动完成定义块之外。

此解决方案的另一个弱点是，onChange事件仅适用于自动完成的上下文。这意味着，例如：如果我快速更改自动填充字段的值（以便不触发自动完成），并且在它离开字段后直接更改，change事件不会被触发，虽然这个领域已经改变了。

解决方法2

另一种方法是从change事件中触发change事件，例如：

autocompletechange

现在我要在$(document).ready(function() { foo.on('autocompletechange', function() { console.log('autocompletechange'); foo.trigger('change'); }); foo.change(function() { console.log('change'); updateFooDependentFields(this.value); }); }); 上执行的操作是在自动填充上下文之外的某个位置定义的，因此如果我删除自动完成功能，我不需要记住副作用。但在这种情况下，当我在字段中输入某些内容时，change事件会被触发两次 - 一次，因为我已经更改了字段值，在那里键入了一些东西，并且一次更多，因为change触发了autocompletechange事件。