Issue
I am trying to build a variable number of keyword boxes (the number of keyword boxes is handeld by php). For better understanding I made three hardcoded html keyword boxes. The final result should be multiple keyword boxes which can handle multiple keywords and show them after every ENTER in a seperated inner box. If I click on the BUTTON, all keywords should be alerted.
My current try is nearly working. You are able to type in keywords, store them by pressing enter. But the inner keyword boxes are only shown, after klicking on the keyword box again.
I would be verry grateful if anybody could help me with this problem. :)
let tags = [];
let tagContainer = document.querySelectorAll('.tag-container');
tagContainer.forEach(function(foo) {
foo.addEventListener('click', (e) => {
//console.log(e.target.tagName);
//if (e.target.tagName === 'I') {
var tagLabel = e.target.getAttribute('data-item');
var index = tags.indexOf(tagLabel);
tags = [...tags.slice(0, index), ...tags.slice(index + 1)];
foo.querySelectorAll('.tag').forEach(tag => {
tag.parentElement.removeChild(tag);
});
tags.slice().reverse().forEach(tag => {
var div = document.createElement('div');
div.setAttribute('class', 'tag');
var span = document.createElement('span');
span.innerHTML = tag;
var closeIcon = document.createElement('i');
closeIcon.innerHTML = 'close';
closeIcon.setAttribute('class', 'material-icons');
closeIcon.setAttribute('data-item', tag);
div.appendChild(span);
div.appendChild(closeIcon);
foo.prepend(div);
});
//}
})
});
let input = document.querySelectorAll('.tag-container input');
input.forEach(function(bar) {
bar.addEventListener('keyup', (e) => {
if (e.key === 'Enter') {
e.target.value.split(',').forEach(tag => {
tags.push(tag);
});
bar.querySelectorAll('.tag').forEach(tag => {
tag.parentElement.removeChild(tag);
});
tags.slice().reverse().forEach(tag => {
var div = document.createElement('div');
div.setAttribute('class', 'tag');
var span = document.createElement('span');
span.innerHTML = tag;
var closeIcon = document.createElement('i');
closeIcon.innerHTML = 'close';
closeIcon.setAttribute('class', 'material-icons');
closeIcon.setAttribute('data-item', tag);
div.appendChild(span);
div.appendChild(closeIcon);
bar.prepend(div);
});
bar.value = '';
}
bar.focus();
})
});
function clicked() {
alert(JSON.stringify(tags));
}.container {
width: 20%;
margin: 40px;
align-self: center;
}
.tag-container {
border: 2px solid #ccc;
padding: 10px;
border-radius: 5px;
display: flex;
}
.tag-container .tag {
padding: 5px;
border: 1px solid #ccc;
display: flex;
align-items: center;
margin: 5px;
border-radius: 3px;
background: #f2f2f2;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px #fff;
cursor: default;
}
.tag i {
font-size: 16px;
margin-left: 5px;
}
.tag-container input {
flex: 1;
font-size: 16px;
padding: 5px;
outline: none;
border: 0;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<table>
<td>
<div class="tag-container">
<div id="span_tag">
<span id="span_key" value=""></span>
<i class="material-icons">close</i>
</div>
<input id="input_search" value="" />
</div>
</tr>
</td>
<td><button type="button" id="bt" onclick="clicked()">Button</button>
<td/>
</table>
<table>
<td>
<div class="tag-container">
<div id="span_tag">
<span id="span_key" value=""></span>
<i class="material-icons">close</i>
</div>
<input id="input_search" value="" />
</div>
</tr>
</td>
<td><button type="button" id="bt" onclick="clicked()">Button</button>
<td/>
</table>
<table>
<td>
<div class="tag-container">
<div id="span_tag">
<span id="span_key" value=""></span>
<i class="material-icons">close</i>
</div>
<input id="input_search" value="" />
</div>
</tr>
</td>
<td><button type="button" id="bt" onclick="clicked()">Button</button>
<td/>
</table>re
Solution
const tagContainerNodes = document.querySelectorAll(".tag-container");
tagContainerNodes.forEach((tagContainerNode) => {
const input = tagContainerNode.querySelector("input");
input.addEventListener("keyup", e => {
if (e.key === "Enter") {
createTag(e.target.value, tagContainerNode, input);
e.target.value = "";
}
});
});
function createTag(tagName, parent, before) {
var div = document.createElement("div");
div.setAttribute("class", "tag");
var span = document.createElement("span");
span.innerHTML = tagName;
div.appendChild(span);
parent.insertBefore(div, before)
}
function clicked() {
const allTagText = [];
tagContainerNodes.forEach((tagContainerNode) => {
const tagNodes = tagContainerNode.querySelectorAll(".tag");
tagNodes.forEach((tagNode) => {
allTagText.push(tagNode.textContent);
});
});
console.log(allTagText);
}.tag-container {
border: 2px solid #ccc;
padding: 10px;
border-radius: 5px;
display: flex;
}
.tag-container .tag {
padding: 5px;
border: 1px solid #ccc;
margin: 5px;
border-radius: 3px;
background: #f2f2f2;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px #fff;
}
.tag-container input {
font-size: 16px;
padding: 5px;
outline: none;
border: 0;
}<div class="tag-container">
<input id="input_search" />
</div>
<button type="button" onclick="clicked()">Button</button>
<div class="tag-container">
<input id="input_search" />
</div>
<button type="button" onclick="clicked()">Button</button>
<div class="tag-container">
<input id="input_search" />
</div>
<button type="button" onclick="clicked()">Button</button>Answered By - ksav Answer Checked By - Mildred Charles (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.