jQuery Autocomplete中select事件获取KeyID显示undefined问题

看起来你遇到的是jQuery UI Autocomplete中select事件无法读取自定义属性的典型问题，核心原因出在source回调里的$.map数据映射环节：

问题根源 #

你在success回调里的alert能拿到item.KeyID，说明后端返回的原始数据是包含这个字段的，但如果你的$.map只返回了Autocomplete默认需要的label或value（甚至直接返回字符串），那么最终传递给select事件的ui.item就会丢失KeyID这个自定义属性，导致读取时显示undefined。

修复方案 #

修改$.map的返回值，把KeyID也包含到返回的对象中，确保Autocomplete能把这个属性传递到select事件里：

$(document).ready(function () {
    $('#Company').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("AutoCompleteCompany", "Main")',
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        // 这里的alert能验证KeyID存在，可保留测试或删除
                        // alert('Key ' + item.KeyID);
                        // 返回包含所有需要属性的对象
                        return {
                            label: item.CompanyName, // 替换成你实际要显示的文本字段
                            value: item.CompanyName, // 替换成你希望输入框显示的内容
                            KeyID: item.KeyID // 关键：把KeyID加入返回对象
                        };
                    }));
                }
            });
        },
        select: function (event, ui) {
            // 现在就能正常获取KeyID了
            var selectedKeyID = ui.item.KeyID;
            console.log('选中的KeyID：', selectedKeyID);
            
            // 可选：阻止默认行为，避免输入框被自动填充为value（如果需要自定义显示）
            // event.preventDefault();
            // $('#Company').val(ui.item.label);
        }
    });
});

额外说明 #

如果之前你的$.map是直接返回字符串（比如return item.CompanyName），那ui.item就只是一个字符串，自然没有KeyID属性。必须返回包含label、value以及自定义属性的对象，才能在select事件中访问到这些额外数据。

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