基于双输入字段的jQuery Autocomplete Ajax传参至CGI脚本问题

你在给input2做自动补全时，遇到了无法同时传递input1和input2参数到CGI脚本的问题——你的代码里参数传递的逻辑有点小问题，我来帮你修正一下：

问题分析 #

你原来的代码里，把frmStr这个包含两个字段的对象赋值给了frmStr:request.term，这相当于把input2的输入值覆盖了你之前组装的参数对象，CGI脚本自然拿不到input1的值。正确的做法应该是直接把两个参数作为独立的键值对传给AJAX的data属性。

修正后的代码 #

function fillbox2(){
    $('#input2').autocomplete({
        source: function(request, response ){
            // 直接构造要传递的参数对象：input1的值 + input2当前输入的内容（request.term）
            var params = {
                input1: $('#input1').val(),
                input2: request.term // 这里request.term就是用户在input2里输入的文本
            };
            
            $.ajax({
                url: './cgi_temp2.cgi',
                dataType: 'json',
                data: params, // 直接传递这个参数对象
                success: function(data) {
                    // 把CGI返回的JSON数据传给response函数，实现自动补全
                    response(data);
                },
                error: function(xhr, status, error) {
                    // 可选：处理请求失败的情况
                    console.error('Autocomplete请求失败:', error);
                    response([]); // 失败时返回空数组，避免报错
                }
            });
        },
        minLength: 1 // 可选：设置输入至少1个字符才触发自动补全
    });
}

额外注意事项 #

• 确保#input1在调用fillbox2()的时候已经有值，或者可以监听#input1的change事件，当input1的值变化时重新初始化input2的autocomplete，比如：

  $('#input1').on('change', function() {
      // 先销毁旧的autocomplete实例，再重新初始化
      $('#input2').autocomplete('destroy');
      fillbox2();
  });
  

• 你的CGI脚本cgi_temp2.cgi需要能正确解析input1和input2这两个GET参数（因为jQuery AJAX默认用GET方法），然后返回合法的JSON格式数据（比如一个字符串数组["选项1", "选项2"]或者带label和value的对象数组）。

内容的提问来源于stack exchange，提问作者ApisMel