添加_renderMenu方法后JQuery UI autocomplete抛出TypeError的原因

错误原因 #

你重写的_renderMenu方法是空的，没有完成菜单项的渲染工作。Autocomplete的内部交互逻辑（比如menufocus）依赖渲染后的菜单DOM元素以及绑定的item数据，空方法导致菜单无任何内容，后续代码尝试访问不存在的item的value属性，就触发了TypeError: Cannot read properties of undefined (reading 'value')。

解决方案 #

自定义_renderMenu时，必须确保完成菜单项的渲染，有两种常见方式：

方式1：保留原渲染逻辑，仅修改外观 #

如果只是想调整菜单样式，不需要改变菜单项结构，可以先调用父类的_renderMenu完成基础渲染，再添加自定义样式：

$.widget( 'ui.autocomplete', $.ui.autocomplete, {
    _renderMenu : function ( ul, items ) {
        // 调用父类的原方法，完成基础菜单项渲染
        this._super(ul, items);
        // 给菜单容器添加自定义类，用于修改样式
        ul.addClass('custom-autocomplete-menu');
    }
});

var tags = ["Books", "Magazines", "Poems"];
$( "#automplete" ).autocomplete({ source: tags });

然后在CSS中定义自定义样式即可，比如：

.custom-autocomplete-menu {
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
}
.custom-autocomplete-menu li {
    padding: 8px 12px;
    cursor: pointer;
}
.custom-autocomplete-menu li:hover {
    background-color: #e0e0e0;
}

方式2：完全自定义菜单项渲染 #

如果需要完全自定义菜单项的结构，需要手动遍历items并创建DOM元素，同时绑定item数据确保交互正常：

$.widget( 'ui.autocomplete', $.ui.autocomplete, {
    _renderMenu : function ( ul, items ) {
        var that = this;
        // 清空菜单容器
        ul.empty();
        // 遍历所有数据源项
        $.each(items, function(index, item) {
            // 创建自定义菜单项
            var li = $('<li class="custom-menu-item">')
                .html('<span class="item-label">' + (item.label || item.value) + '</span>')
                .appendTo(ul);
            // 绑定item数据到li元素，确保交互时能获取到item信息
            that._bindItemData(li, item);
        });
        // 给菜单容器添加自定义类
        ul.addClass('custom-menu-container');
    }
});

var tags = ["Books", "Magazines", "Poems"];
$( "#automplete" ).autocomplete({ source: tags });

对应的CSS示例：

.custom-menu-container {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 4px 0;
}
.custom-menu-item {
    padding: 6px 16px;
    margin: 0;
    list-style: none;
}
.custom-menu-item:hover {
    background-color: #f0f0f0;
}
.item-label {
    font-size: 14px;
    color: #333;
}

内容的提问来源于stack exchange，提问作者www.matemingler.com