如何使用动态请求参数实现像谷歌一样的自动完成

How to implement Autocomplete like Google with dynamic request parameters?

本文关键字：一样 请求 动态 何使用 参数 实现 谷歌      更新时间：2023-09-26

我正在像谷歌一样使用jQuery插件Autocomplete来处理表单字段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的当前值进行筛选，因为目标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，但没有成功。

如何让"像谷歌一样的自动完成"处理动态变化的字段

$(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);
                })
        }],  
    });
});
相关文章：