如何使用动态请求参数实现类似 Google 的自动完成？

Question

我正在为表单字段使用 jQuery 插件 Autocomplete like Google foo:

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

URI /my/ajax/controller/foo?data[name]=%QUERY% 调用数据库服务（执行像 SELECT * FROM foo WHERE name LIKE %name% 这样的语句），准备数据，并提供像 ['qwer', 'asdf', 'yxcv'].

这样的简单数组

现在我想为另一个字段添加自动完成功能 (bar)。区别在于，它需要 foo 的 current 值进行过滤，因为目标 SQL 查询看起来像 SELECT * FROM bar WHERE number JOIN foo ON bar.foo_name = foo.name WHERE number LIKE %number% AND foo.name = foo_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，但它没有用。

如何 "Autocomplete like Google" 使用动态变化的字段？

Answer 1

$(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);
                })
        }],  
    });
});

如何使用动态请求参数实现类似 Google 的自动完成？

How to implement Autocomplete like Google with dynamic request parameters?

javascript

jquery

ajax

autocomplete

jquery-autocomplete