实现 CSS，显示自动完成芯片的图像答案

【问题标题】：Materialize CSS, show images for autocompleted chips实现 CSS，显示自动完成芯片的图像
【发布时间】：2017-12-28 01:00:12
【问题描述】：

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”与关闭按钮，无图像。是否可以在创建后将图像与芯片中的文本一起显示？

【问题讨论】：

标签： javascript jquery css autocomplete materialize

【解决方案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');

【讨论】：