javascript - Materialize 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”和关闭按钮的信息 block ，没有图像。是否可以在创建芯片后让图像与文本一起显示？

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');