如何优化Ajax+Autocomplete代码并在select回调中传递Ajax返回对象

已实现基于jQuery Autocomplete与Ajax的成员信息自动补全功能，最初仅支持邮箱字段，后续扩展到姓名字段可正常运行，但现在需要支持姓名、手机号、电话、邮箱等多字段搜索，每个字段都要编写重复的Autocomplete代码，导致代码冗长。核心疑问是：如何将Ajax请求返回的对象传递到select回调函数中使用？

现有姓名字段自动补全代码 #

$('#input-personal_name').autocomplete({
    'source': function(request, response) {
        $.ajax({
            url: "{{ route('lang.admin.member.members.autocomplete') }}?filter_personal_name=" + encodeURIComponent(request),
            dataType: 'json',
            success: function(json) {        
                response($.map(json, function(item) {
                    return {
                        label: item['personal_name'],     
                        personal_name: item['personal_name'],   
                        customer_id: item['member_id'],
                        telephone: item['telephone'],
                        mobile: item['mobile'],
                        email: item['email'],
                        payment_company: item['payment_company'],
                        payment_tin: item['payment_tin'],
                        shipping_company: item['shipping_company'],
                        shipping_personal_name: item['shipping_personal_name'],
                        shipping_state_id: item['shipping_state_id'],
                        shipping_city_id: item['shipping_city_id'],
                        shipping_address1: item['shipping_address1'],
                    }
                }));
            }
        });
    },
    'select': function(event,ui) {
        $('#input-personal_name').val(event.personal_name);
        $('#input-mobile').val(event.mobile);
        $('#input-telephone').val(event.telephone);
        $('#input-email').val(event.email);
        $('#input-payment_company').val(event.payment_company);
        $('#input-payment_tin').val(event.payment_tin);
        $('#input-shipping_company').val(event.shipping_company);
        $('#input-shipping_personal_name').val(event.shipping_personal_name);
        $('#input-shipping_state_id').val(event.shipping_state_id);
        $('#input-shipping_city_id').val(event.shipping_city_id);
        $('#input-shipping_address1').val(event.shipping_address1);
  }
});

优化方案 #

1. 核心思路 #

• 封装公共初始化函数，统一处理多字段的Autocomplete配置，消除重复代码
• 在Ajax回调中把成员的完整数据映射到Autocomplete返回的选项对象中，确保select回调能直接获取所有数据

2. 完整优化代码 #

// 公共初始化函数：为指定字段绑定成员自动补全
function initMemberAutocomplete(fieldSelector, filterParam) {
    $(fieldSelector).autocomplete({
        'source': function(request, response) {
            $.ajax({
                // 注意：request.term才是用户输入的搜索关键词，原代码的request是整个请求对象
                url: "{{ route('lang.admin.member.members.autocomplete') }}?" + filterParam + "=" + encodeURIComponent(request.term),
                dataType: 'json',
                success: function(json) {        
                    // 将接口返回的成员数据映射为Autocomplete需要的格式，保留所有字段
                    response($.map(json, function(item) {
                        // 根据当前搜索字段设置下拉显示的文本
                        let displayField = filterParam.replace('filter_', '');
                        let label = item[displayField] || item.personal_name;
                        return {
                            label: label,
                            ...item // 展开所有成员字段，方便select回调直接使用
                        };
                    }));
                }
            });
        },
        'select': function(event, ui) {
            // 阻止默认行为，避免输入框被自动填充为默认value值
            event.preventDefault();
            // 将选中的成员完整数据传入公共填充函数
            setMemberFields(ui.item);
            // 手动设置当前搜索字段的值为选中的显示文本
            $(event.target).val(ui.item.label);
        }
    });
}

// 公共填充函数：用选中的成员数据批量填充表单字段
function setMemberFields(member) {
    $('#input-personal_name').val(member.personal_name);
    $('#input-mobile').val(member.mobile);
    $('#input-telephone').val(member.telephone);
    $('#input-email').val(member.email);
    $('#input-payment_company').val(member.payment_company);
    $('#input-payment_tin').val(member.payment_tin);
    $('#input-shipping_company').val(member.shipping_company);
    $('#input-shipping_personal_name').val(member.shipping_personal_name);
    $('#input-shipping_state_id').val(member.shipping_state_id);
    $('#input-shipping_city_id').val(member.shipping_city_id);
    $('#input-shipping_address1').val(member.shipping_address1);
}

// 一键初始化所有需要自动补全的字段
initMemberAutocomplete('#input-personal_name', 'filter_personal_name');
initMemberAutocomplete('#input-mobile', 'filter_mobile');
initMemberAutocomplete('#input-telephone', 'filter_telephone');
initMemberAutocomplete('#input-email', 'filter_email');

关键说明 #

• 数据传递逻辑：在source的$.map处理中，用扩展运算符...item把接口返回的所有成员字段都附加到Autocomplete的选项对象里，这样用户选中选项时，ui.item就包含了该成员的完整数据，直接传入setMemberFields即可填充表单。
• 消除重复代码：只需调用initMemberAutocomplete函数，传入字段选择器和对应的搜索参数，就能完成单个字段的自动补全绑定，无需重复编写Autocomplete配置。
• 修正原代码错误：原select回调错误地通过event获取成员数据，实际jQuery Autocomplete的select回调参数中，ui.item才是选中的选项对象，event仅为事件触发对象。

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