jQuery autocomplete select方法无法正确获取ui.item属性值问题

问题原因 #

代码中有两处错误直接导致功能失效：

• 数据映射阶段漏传字段：在source配置的$.map逻辑里，构造的下拉项对象只保留了label和value两个属性，没有把接口返回的code字段存入对象，后续选中环节的ui.item自然访问不到code属性
• 回调参数写法错误：jQuery UI Autocomplete的select事件回调只接收event、ui两个固定参数，额外写的第三个形参el是无效的，不会拿到任何有效数据

修正后可直接运行的代码 #

$(".Commodities").autocomplete({
    source: function (request, response) {
        $.getJSON('url',  function (data) {
            var comms = $.map(data, function (el) {
                return {
                    label: el.desc,
                    value: el.desc,
                    code: el.code // 补全code字段映射，ui.item才能读取到对应值
                };
            });
            response($.ui.autocomplete.filter(comms, request.term));
        })   
    },
    minLength: 2,
    select: function( event, ui ) {
        $('#commcd').val(ui.item.code);
        // 如果不需要选中后自动把desc填充到.Commodities输入框，放开下面这行注释即可
        // event.preventDefault();
    }
});

补充说明 #

• ui.item的所有属性完全来自你在source中传给response()方法的数组元素，构造数组元素时定义了哪些属性，选中时就能从ui.item上读到哪些属性
• 不要随意给jQuery UI组件的事件回调加额外形参，所有回调的参数列表是组件固定定义的，多余形参只会是undefined
• Autocomplete默认会在选中项后，把当前项的value值填充到绑定的输入框中，如果这个默认行为不符合需求，在select回调里执行event.preventDefault()就能阻止。

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