具体化CSS，显示自动完成芯片的图像

Question

Materialize chips 的文档显示您可以使用图像制作芯片：

<div class="chip">
<img src="images/yuna.jpg" alt="Contact Person">
Jane Doe
</div>

这工作正常 - 当我们来到自动完成选项时，这也有效：

$('.chips-autocomplete').material_chip({
autocompleteOptions: {
data: {
'Apple': null,
'Microsoft': null,
'Google': 'images/juna.jpg'
},
limit: Infinity,
minLength: 1
}
});

由于我们已将"images/juna.jpg"指定为对象中"Google"属性的值，因此当我们开始键入"Goo"时，此图像将显示在自动完成下拉列表旁边。

但是，当选择此下拉项时，它只是添加一个芯片，上面写着"Google"，带有关闭按钮，没有图像。创建芯片后，是否可以让图像与芯片中的文本一起显示？

Answer 1

在我的例子中，我使用chip.add事件在输入芯片时显示图像。基本上，我必须复制传递给autocompleteOptions的数据，并使用chip.tag作为键来匹配正确的图像。

$('.chips').on('chip.add', function(e, chip){
var data = {
'Kyle Robinson': 'dist/images/user-01.jpg',
'Rebecca Smith': 'dist/images/user-02.jpg',
'Aaron Lloyd': 'dist/images/user-03.jpg'
} //same data passed to autocompleteOptions
var key = chip.tag;
$(this).children('.chip').append('<img src="' + data[key] + '">');
});

活生生的例子：jsFiddle

编辑：无需复制数据，您可以使用以下方法获取数据：

$('.chips-initial').material_chip('data');