CODEWITHSUNDEEP
javascriptmaterialize
Kai K
Kai K

Reputation: 80

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

I am using the materialize autocomplete with chips plugin. (https://materializecss.com/chips.html#basic)

On the autocomplete list I have set an image for each option. So when a user, selects an option on autocomplete, I would like to create a chip with the selected image. I found the exact same question like this one (enter link description here)

code:

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

So the problem I have is that this code is for an older version of materialize. I am currently using v1.0 so I changed the code to:

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

also tried:

$(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?

Upvotes: 0

Views: 154

Answers (1)

Fran G S
Fran G S

Reputation: 107

This work for me

 $(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] + '">');

            }

        });


    });

Explanation: First you try to get tag from a DOM, not from a material instance.

var key = chip.tag;

Chip here is not an material instance.

In my code, I get the instance from the event then get all chips. Then I select the last one.

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

Upvotes: 1

Related Questions