如何将第一个自动补全的JSON结果作为第二个自动补全的变量

我需要实现一个功能：把第一个自动补全组件（#select_order）返回的客户编号（已存储在#select_client_id输入框中），动态传递给第二个自动补全组件（#select_package），让第二个组件能根据这个客户ID获取对应包裹数据。

当前第一个Autocomplete组件代码：

$(function() {
    $("#select_order").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "data/orderData.php",
                type: 'post',
                dataType: "json",
                data: {
                    find_order_out: request.term
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        select: function(event, ui) {
            $('#select_order').val(ui.item.label); // 显示选中的文本
            $('#select_order_id').val(ui.item.value); // 保存选中的ID到输入框
            $('#select_client_id').val(ui.item.client_id);
            return false;
        }
    });
});

第二个Autocomplete组件目前用固定值client="1"传递，代码如下：

$("#select_package").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "data/orderData.php",
            type: 'post',
            dataType: "json",
            data: {
                find_client_package_on_storage: request.term, 
                client: client
            },
            success: function(data) {
                response(data);
                console.log(client);
            }
        });
    },
    select: function(event, ui) {
        $('.select_package').val(ui.item.label); 
        $('.select_package_id').val(ui.item.value); 
        return false;
    }
});

请问如何正确实现这一动态关联功能？

解决方案 #

你只需要修改第二个Autocomplete的source函数，在发起AJAX请求时直接从#select_client_id输入框读取当前客户ID即可，替换原有的固定变量。

修改后的第二个Autocomplete代码 #

$("#select_package").autocomplete({
    source: function(request, response) {
        // 动态获取当前选中的客户ID
        const currentClientId = $('#select_client_id').val();
        
        // 若客户ID为空，返回空结果避免无效请求
        if (!currentClientId) {
            response([]);
            return;
        }
        
        $.ajax({
            url: "data/orderData.php",
            type: 'post',
            dataType: "json",
            data: {
                find_client_package_on_storage: request.term, 
                client: currentClientId // 用动态ID替换固定值
            },
            success: function(data) {
                response(data);
                console.log(currentClientId);
            }
        });
    },
    select: function(event, ui) {
        $('.select_package').val(ui.item.label); 
        $('.select_package_id').val(ui.item.value); 
        return false;
    }
});

额外优化建议 #

1. 同步重置第二个组件：在第一个Autocomplete的select事件中，清空第二个组件的内容，避免残留旧数据：

select: function(event, ui) {
    $('#select_order').val(ui.item.label);
    $('#select_order_id').val(ui.item.value);
    $('#select_client_id').val(ui.item.client_id);
    // 清空第二个组件的输入值和选中ID
    $('#select_package').val('');
    $('.select_package_id').val('');
    return false;
}

2. 控制组件可用性：页面加载时禁用第二个组件，直到用户选择第一个组件后再启用，避免无效操作：

// 页面初始化时禁用第二个组件
$("#select_package").autocomplete("disable");

// 在第一个组件的select事件中启用
select: function(event, ui) {
    // ...原有代码
    $('#select_client_id').val(ui.item.client_id);
    $("#select_package").autocomplete("enable");
    return false;
}

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