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

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

0 голосов
/ 09 марта 2019

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

    }
   
  });


});
Итак, в основном, этот код должен создать чип, и при создании чипа он получит содержимое чипа и проверит, соответствует ли это слово именам.В основном все работает, но я не знаю, как получить введенное значение чипа.В качестве теста я добавил оповещения для отображения значения и всегда возвращает «неопределенное».есть ли способ, чтобы он работал?

1 Ответ

1 голос
/ 09 марта 2019

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

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