Показать изображения для автозаполненных фишек на Materialize css v1.0?

Я использую плагин автозаполнения материализации с чипами. (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] + '">');

    }
   
  });


});
So basically what this code should do is create a chip, and when creating the chip, it will get the chip content, and check if that word matches the names. Basically everything workes, but I do not know how to get the inputted chip value. As a test, I added alerts to display the value and always returns 'undefined'. is there any way for it to work?


javascript materialize
person How to stuff    schedule 09.03.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Эта работа для меня

 $(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, а не из экземпляра материала.

var key = chip.tag;

Чип здесь не материальный экземпляр.

В моем коде я получаю экземпляр из события, а затем получаю все фишки. Затем я выбираю последний.

var chips = M.Chips.getInstance(e[0]).chipsData;
var key = chips[chips.length -1].tag;
person Fran G S    schedule 09.03.2019