Materialize CSS v1.0：如何为自动完成芯片显示图片？

我来帮你梳理下问题根源并给出可行的修复方案：你在适配Materialize v1.0版本时，遇到的核心问题是回调参数用法错误、DOM选择器不准确，还有重复数据定义带来的冗余，这些导致无法正确获取芯片标签值，进而无法加载对应图片。

问题分析 #

1. 回调参数逻辑偏差：Materialize v1.0的onChipAdd回调参数和旧版chip.add事件不同——旧版的chip对象直接包含tag属性，但v1.0中onChipAdd的第二个参数是完整的芯片数据对象，不需要额外通过组件实例去获取全量芯片数组。
2. DOM选择器范围错误：你用$('.chips')选择容器，若页面存在多个chips组件会导致定位错误，应该用当前触发事件的组件容器$(el)来精准定位。
3. 重复数据冗余：三次重复定义相同的autocomplete数据，不仅冗余还容易出现维护不一致的问题。

修复后的完整代码 #

下面是修正后的代码，关键修改点已标注：

$(document).ready(function() {
    // 统一管理自动完成数据，避免重复定义
    const userData = {
        'Kyle Robinson': 'https://randomuser.me/api/portraits/men/78.jpg',
        'Rebecca Smith': 'https://randomuser.me/api/portraits/women/78.jpg',
        'Aaron Lloyd': 'https://randomuser.me/api/portraits/men/79.jpg'
    };

    $('.chips-autocomplete').chips({
        autocompleteOptions: {
            data: userData,
            limit: Infinity,
            minLength: 1
        },
        onChipAdd: function(el, chipData) {
            // 1. 直接从回调参数中获取芯片标签值
            const chipTag = chipData.tag;
            // 2. 从统一数据中匹配对应的图片URL
            const imgUrl = userData[chipTag];
            
            if (imgUrl) {
                // 3. 用当前组件容器精准定位最新添加的芯片，插入图片到标签左侧
                $(el).find('.chip').last().prepend(`<img src="${imgUrl}" alt="${chipTag}">`);
            }
            
            // 测试用：打印芯片数据，确认值是否正确获取
            console.log('当前添加的芯片数据:', chipData);
        }
    });
});

对应的HTML结构：

<div class="chips chips-autocomplete"></div>

关键修改说明 #

• 统一数据管理：把autocomplete数据提取为单独变量userData，后续只需维护这一处，避免重复编写导致的错误。
• 正确获取芯片标签：onChipAdd的第二个参数chipData就是当前新增芯片的完整数据对象，直接通过chipData.tag即可获取标签值，无需额外调用组件实例的chipsData（那是获取所有芯片的数组）。
• 精准DOM定位：使用$(el)定位当前chips容器，再通过.find('.chip').last()找到刚刚添加的芯片，确保不会影响页面其他chips组件。
• 图片插入位置优化：用prepend将图片插入到芯片最左侧，符合Materialize芯片的默认样式（图片在标签文字前），而append会把图片放在删除按钮之后，不符合预期。

备选验证方案 #

如果仍有问题，可以在onChipAdd中打印chipData查看控制台输出的对象结构，确认tag属性是否存在。若版本有细微差异，可尝试从DOM元素直接提取标签值：

// 备选：从DOM元素获取标签值（去除末尾的删除按钮符号）
const latestChip = $(el).find('.chip').last();
const chipTag = latestChip.text().trim().replace(/×$/, '');

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