แสดงรูปภาพสำหรับชิปที่เติมข้อความอัตโนมัติบน 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>

ดังนั้นปัญหาที่ฉันมีคือรหัสนี้มีไว้สำหรับเวอร์ชันเก่าที่เป็นรูปธรรม ขณะนี้ฉันใช้ 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;

Chip ในที่นี้ไม่ใช่ตัวอย่างวัสดุ

ในโค้ดของฉัน ฉันได้รับอินสแตนซ์จากเหตุการณ์ จากนั้นจึงรับชิปทั้งหมด จากนั้นฉันก็เลือกอันสุดท้าย

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