Tampilkan gambar untuk chip yang dilengkapi secara otomatis di Materialize css v1.0?

Saya menggunakan plugin pelengkapan otomatis terwujud dengan chip. (https://materializecss.com/chips.html#basic)

Pada daftar pelengkapan otomatis saya telah menetapkan gambar untuk setiap opsi. Jadi ketika pengguna memilih opsi pelengkapan otomatis, saya ingin membuat chip dengan gambar yang dipilih. Saya menemukan pertanyaan yang sama persis seperti ini (masukkan deskripsi tautan di sini )

kode:

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

Jadi masalah yang saya miliki adalah kode ini untuk materialize versi lama. Saat ini saya menggunakan v1.0 jadi saya mengubah kodenya menjadi:

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

juga mencoba:

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

Jawaban (1)


arrow_upward
1
arrow_downward

Ini berhasil untuk saya

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

            }

        });


    });

Penjelasan: Pertama, Anda mencoba mendapatkan tag dari DOM, bukan dari instance material.

var key = chip.tag;

Chip di sini bukanlah contoh material.

Dalam kode saya, saya mendapatkan instance dari acara tersebut kemudian mendapatkan semua chip. Lalu saya pilih yang terakhir.

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