Script kodlarken konu içine etiket eklemek için kullandığım kodları paylaşıyorum. Umarım bu konuda sıkıntı yaşayanlara yardımcı olur.
Görsel için: https://hizliresim.com/C7OmGg
Js Kodu:
const tagContainer = document.querySelector('.tag-container');
const input = document.querySelector('.tag-container input');
let tags = [];
function createTag(label) {
const div = document.createElement('div');
div.setAttribute('class', 'tag');
const input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', 'thidden[]');
input.setAttribute('value', label);
const span = document.createElement('span');
span.setAttribute('name', 'etiket');
span.innerHTML = label;
const closeIcon = document.createElement('i');
closeIcon.setAttribute('class', 'fas fa-backspace');
closeIcon.setAttribute('style', 'color:red');
closeIcon.setAttribute('data-item', label);
div.appendChild(input);
div.appendChild(span);
div.appendChild(closeIcon);
return div;
}
function clearTags() {
document.querySelectorAll('.tag').forEach(tag => {
tag.parentElement.removeChild(tag);
});
}
function addTags() {
clearTags();
tags.slice().reverse().forEach(tag => {
tagContainer.prepend(createTag(tag));
});
}
input.addEventListener('keyup', (e) => {
if (e.which == 27) {
e.target.value.split(',').forEach(tag => {
tags.push(tag);
});
addTags();
input.value = '';
}
});
document.addEventListener('click', (e) => {
console.log(e.target.tagName);
if (e.target.tagName === 'I') {
const tagLabel = e.target.getAttribute('data-item');
const index = tags.indexOf(tagLabel);
tags = [...tags.slice(0, index), ...tags.slice(index+1)];
addTags();
}
})
input.focus();Kod Php:$etiketbul=$this->input->post('thidden');
$birlestir = implode(',',$etiketbul); echo $birlestir;Kod Html:<div class="tag-container">
<input />
</div>Javascript: span tagı ile etiketi ekrana basar, ben etiketleri ayırmak için esc tuşunu kullandım. i tagı kırmızı silme butonunu oluşturur. input hidden ise etiketi post etmek için kullanılır. html kod ile etiket ekleme olayını istediğiniz yerde gösterebilirsiniz.Herkese iyi çalışmalar.
