Чипы автозаполнения Materializecss с пользовательскими данными
Я использую чипы 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
},
Мое поле автозаполнения не отображается должным образом:
Кроме того, функция обратного вызова onChipAdd не получает чип с полными данными и выглядит только так:
{
tag: 'golang'
}
Можно ли добиться этого в materializecss?
Ответы 1
Прямого метода нет. Вам нужно изменить библиотеку. Обратный вызов автозаполнения всегда заменяется.
Предполагая, что вы используете Материализовать 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} }
Надеюсь, помог :)
Сработало отлично. Возможно, рассмотрите возможность переименования
imgвimage, чтобы он соответствовал библиотеке.