Я настроил материализацию для создания чипа автозаполнения. Пользователь может ввести в поле ввода (на самом деле div) и материализовать с отображением результатов сопоставления. При выборе этот результат становится чипом. Это взаимодействие является частью более крупной формы, которая будет отправлена. То, что я пытаюсь сделать, это передать данные чипа в скрытый вход на странице в виде списка. Я видел это в других местах, но кажется, что есть решения, которые используют jQuery и Materialise 0,9 или нет jQuery и Materialize 1.0. Я застрял между ними. Я использую jQuery для инициализации чипа автозаполнения, но использую последнюю версию (1.0) Materialise. Вот jsfiddle того, что я пытаюсь сделать: https://jsfiddle.net/kfox0erb/
Код jQuery, который я пытаюсь отладить, выглядит следующим образом (обратите внимание, что это был чужой код, который работал с более ранней версией Materialize, так что я пытался заставить его работать с текущей версией.
function updateChipInput(chip) {
var newval = $(chip).chip('data')
.reduce(function(result, val) {
result.push(val.tag);
return result;
}, []).join(",")
$('input[name="hiddenchip"]').val(newval);
}
$(document).ready(function() {
var data = $('input[name="hiddenchip"]').val().split(',')
.map(function(tag) {
return {
tag: tag
}
})
$('.chips').chips();
$('.chips-autocomplete').chips({
autocompleteOptions: {
data: {
'Apple': null,
'Microsoft': null,
'Google': null
},
limit: 5,
minLength: 1
},
onChipAdd: function(e, chip) {
updateChipInput(this);
},
onChipDelete: function(e, chip) {
updateChipInput(this);
}
});
});
И HTML
<form>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<div name="chip_select" class="chips chips-autocomplete"></div>
<label for="autocomplete-input">Autocomplete</label>
</div>
</div>
</div>
</div>
<input name="hiddenchip" type="hidden" value="0">
</form>
Спасибо за вашу помощь!