实现CSS，显示自动完成芯片的图像 [英] Materialize CSS, show images for autocompleted chips

问题描述

对芯片进行材料化的文件显示可以用图像制作芯片:

Documentation for Materialize chips shows you can make chips with images:

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

这很好用-当我们使用自动完成选项时，这也可以工作:

This works fine - and when we come to the autocomplete option, this also works:

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

由于我们在对象中将"images/juna.jpg"指定为"Google"属性的值，因此当我们开始输入"Goo"时，该图像就会显示在自动填充下拉菜单中.

As we have specified "images/juna.jpg" as the value for the "Google" property in the object, this image shows up alongside the autocomplete dropdown when we begin typing "Goo".

然而，选择该下拉项时，它只是增加了一个芯片，谷歌"说，与一个关闭按钮，无图像.创建图像后，是否可以将图像与文本一起显示在芯片上?

However, when this dropdown item is selected, it simply adds a chip that says "Google" with a close button, no image. Is it possible to have the images show up alongside the text in the chip after it is created?

推荐答案

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

In my case I used the chip.add event to display the image when chip is entered. Basically I had to duplicate the data passed to the autocompleteOptions and used the chip.tag as key to match the correct image.

$('.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

无需复制数据，您可以使用以下方法获取它:

There is no need to duplicate the data, you can get it using:

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

这篇关于实现CSS，显示自动完成芯片的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！