Materializecss Автозаполнение чипов с пользовательскими данными - PullRequest
Новая
       20

Materializecss Автозаполнение чипов с пользовательскими данными

0 голосов
/ 27 октября 2018

Я использую чипы materializecss с опцией автозаполнения и настройку данных автозаполнения с помощью ajax.Документация показывает настройку основных тегов с использованием следующего синтаксиса: 

$('.chips-autocomplete').chips({
    autocompleteOptions: {
      data: {
        'Apple': null,
        'Microsoft': null,
        'Google': null
      },
      limit: Infinity,
      minLength: 1
    }
  });

Однако, когда я на самом деле хочу использовать эти теги, я хочу получить некоторые дополнительные данные, помимо имени тега (например, id).так что я могу делать PATCH запросы с полем id.В настоящее время я не могу этого достичь.

Если я сделаю это: 

autocompleteOptions: {
      data: {
        'golang': {
          tag: 'golang',
          id: 1
        },
        'docker': {
          tag: 'docker',
          id: 2
        },
        'kubernetes': {
          tag: 'kubernetes',
          id: 3
        }
      },
      minLength: 2
    },

Поле автозаполнения не отображается правильно: enter image description here

Кроме того, функция обратного вызова onChipAdd не получает чип с полными данными и выглядит только следующим образом: 

{
  tag: 'golang'
}

Возможно ли добиться этого в materializecss?

1 Ответ

0 голосов
/ 15 января 2019

Прямого метода нет. Вам нужно изменить библиотеку. Автозаполнение обратного вызова всегда заменяется.

Предполагается, что вы используете Материализация v1.0.0 и ваш объект данных автозаполнения,

Изменить следующие строки:

6765 => Изменить автозаполнение обратного вызова для нового объекта 

this.options.onAutocomplete.call(this, text); //ORIGINAL
//Replace with this
this.options.onAutocomplete.call(this, {text: text, id: parseInt(el[0].dataset.tagId)});  //CUSTOM

6792 => Изменить объект ввода для автозаполнения данных 

var entry = {
    data: data[key],
    key: key
};
//Replace with this
var entry = {
    data: data[key].img,
    key: data[key].tag, 
    id: data[key].id
};

6814 => Отображать раскрывающийся список автозаполнения с измененными элементами списка 

var $autocompleteOption = $("<li></li>"); //ORIGINAL
//Replace with this
var $autocompleteOption = $("<li data-tag-id="+_entry.id+"></li>"); //CUSTOM

7890 => Настройка автозаполнения обратного вызова для чипов 

_this46.addChip({
    tag: val
});
//Replace with this
_this46.addChip({
    id: val.id,
    tag: val.text,
});

Готово!

У меня была такая же проблема, и вот как я ее решил. Я использовал атрибут «data-tag-id» <li> для передачи идентификатора моих тегов. Когда вы получите данные из чипов, у вас будет свойство tag и свойство id.

PD: если вы хотите показать автозаполнение с предварительным просмотром изображения, вам необходимо установить объект данных автозаполнения следующим образом: 

data:{ 'key':{tag:'key', img:'url/to/image.png', id: 2} }

Надеюсь, я помог:)

...