Javascript 如何使用动态请求参数实现像Google一样的自动完成？

我将jQuery插件用于表单字段foo：

URI/my/ajax/controller/foo？data[name]=%QUERY%调用数据库服务，该服务执行SELECT*FROM foo语句，其中name%name%预先处理数据，并提供一个简单数组，如['qwer'、'asdf'、'yxcv']

现在我想将自动完成添加到另一个字段栏。不同之处在于，它需要foo的当前值进行过滤，因为目标SQL查询看起来像SELECT*FROM bar，其中number在bar.foo\u name=foo.name上连接foo，其中number像%number%和foo.name=foo\u name。下面是我如何尝试实施它的：

$(function() {
    $("#bar").autocomplete({
        minLength: 3,
        limit: 5,
        valueKey:'number',
        source : [{
            url:"/my/ajax/controller/bar?data[number]=%QUERY%&data[foo_name]=" + $('#foo').val(),
            type:'remote'
        }],  
    });
});

但是foo的值只被读取一次——当页面被加载时。这意味着，更改和当前值将被忽略。我试图传递回调而不是URL，但没有成功

如何让自动完成像谷歌工作与动态变化的领域

$(function() {
    $("#bar").autocomplete({
        minLength: 3,
        limit: 5,
        valueKey:'number',
        source : [{
            url:"/my/ajax/controller/bar?data[number]=%QUERY%&data[foo_name]=" + $('#foo').val(),
            type:'remote'
        }],  
    });
});

$(function() {
    $("#bar").autocomplete({
        minLength: 3,
        limit: 5,
        source : [
            function(q,add){
                $.getJSON("/my/ajax/controller/bar?data[number]=" + q + "&data[foo_name]=" + $('#foo').val(), function(resp) {
                    add(resp);
                })
        }],  
    });
});