在 Materialise css v1.0 上显示自动完成的芯片的图像？

Question

我正在使用 materialize autocomplete with chips 插件。 (https://materializecss.com/chips.html#basic)

在自动完成列表中，我为每个选项设置了一张图片。因此，当用户选择自动完成选项时，我想用所选图像创建一个芯片。我发现了与此完全相同的问题 ()

代码：

$(document).ready(function() {
  $('.edit--assignee').material_chip({
    autocompleteOptions: {
      data: {
        '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'
      },
      limit: Infinity,
      minLength: 1
    }
  });

  $('.chips').on('chip.add', function(e, chip) {
    var data = {
      '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'
    }
    var key = chip.tag;
    $(this).children('.chip').last().append('<img src="' + data[key] + '">');
  });

});

<div class="edit--assignee">
</div>

所以我遇到的问题是这段代码适用于旧版本的 Materialize。我目前使用的是 v1.0，所以我将代码更改为：

$(document).ready(function() {
  $('.chips-autocomplete').chips({
    autocompleteOptions: {
      data: {
        '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'
      },
      limit: Infinity,
      minLength: 1
    },
      onChipAdd: function(e, chip) {
    var data = {
      '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'
    }


    var key = chip.tag;

alert(chip)
    $('.chips').children('.chip').last().append('<img src="' + data[key] + '">');

    }
   
  });


});

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

也试过：

$(document).ready(function() {
  $('.chips-autocomplete').chips({
    autocompleteOptions: {
      data: {
        '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'
      },
      limit: Infinity,
      minLength: 1
    },
      onChipAdd: function(e) {
    var data = {
      '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'
    }

var chip = M.Chips.getInstance($('.chips-autocomplete')).chipsData;
    var key = chip.tag;

alert(chip)
    $('.chips').children('.chip').last().append('<img src="' + data[key] + '">');

    }
   
  });


});

所以这段代码基本上应该做的是创建一个芯片，在创建芯片时，它将获取芯片内容，并检查该单词是否与名称匹配。基本上一切正常，但我不知道如何获取输入的筹码值。作为测试，我添加了警报以显示值并且始终 returns 'undefined'。有什么办法让它起作用吗？

Answer 1

这对我有用

 $(document).ready(function() {
        $('.chips-autocomplete').chips({
            autocompleteOptions: {
                data: {
                    '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'
                },
                limit: Infinity,
                minLength: 1
            },
            onChipAdd: function(e) {
                var data = {
                    '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'
                }

                var chips = M.Chips.getInstance(e[0]).chipsData;
                var key = chips[chips.length -1].tag;

                $('.chips').children('.chip').last().append('<img src="' + data[key] + '">');

            }

        });


    });

说明：首先，您尝试从 DOM 而不是 material 实例获取标签。

var key = chip.tag;

这里的芯片不是material实例。

在我的代码中，我从事件中获取实例，然后获取所有筹码。那我select最后一个

var chips = M.Chips.getInstance(e[0]).chipsData;
var key = chips[chips.length -1].tag;

在 Materialise css v1.0 上显示自动完成的芯片的图像？

Show images for autocompleted chips on Materialize css v1.0?

javascript

materialize