I have problem with forcing materialize autocomplete to work on dynamic table. It works fine on static element of the table. I am using js document.createElement. Console tells me html looks the same: console.log(tbody) of dynamic element of table
...but like mentioned before, only static element of table shows autocomplete dropdown: working static dropdown:
My code:
*****HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta charset="utf-8" />
<?!= include("page-css"); ?>
<script type="text/javascript" src="autosearch.js"></script>
</head>
<body>
<footer class="page-footer #2196f3 red">
<div class="container">
<table>
<tr>
<h3 style="text-align: center; vertical-align: middle;">Requested projects:</h3>
</tr>
</table>
</div>
</footer>
<br>
<br>
<div class="container-fluid" style="width:100%; font-size:13px; padding:0px; margin:0px;">
<table border = "1" id="tableData" class = "#eeeeee grey lighten-3" style="width:90%; margin: 0px auto; align: center;">
<thead>
<tbody>
<tr>
WORKING STATIC TEST OF AUTOCOMPLETE:
<td>
<th>
<div class="input-field">
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input"></label>
</div>
</th>
<td>
</tr>
</tbody>
<tr>
<th>Code</th>
<th>name</th>
<th>Please select project:</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
<?!= include("page-js"); ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
*****JS:
<script>
//EVENTS
//ON LOAD EVENT
window.addEventListener('load', () => {
loadingData();
}); //mozna tez DOMContentLoaded zamiast load
//DROPDOWN EVENT
document.addEventListener('DOMContentLoaded', function() {
// document.dispatchEvent(new Event('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems,{
data:{
'option 1':null,
'option 2':null,
'option 3':null
}, minLength: 0
});
});
//FUNCTIONS
function loadingData(){
//just loading rotating thing
}
function generateTable(dataArray){
console.log("generateTable")
var tbody = document.getElementById("table-body")
let numb = tbody.childNodes.length;
for (a = 1; a<numb; a++){
tbody.removeChild(tbody.firstElementChild);
}
dataArray.forEach(function(r){
var row = document.createElement("tr");
var col1 = document.createElement("td");
col1.textContent = r[0];
row.appendChild(col1);
var col2 = document.createElement("td");
col2.textContent = r[1];
row.appendChild(col2);
var col3 = document.createElement("td");
//not working dynamic autocomplete
var th = document.createElement("th");
col3.appendChild(th);
var div = document.createElement("div");
div.setAttribute("class", "input-field");
th.appendChild(div);
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("id", "autocomplete-input");
input.setAttribute("class", "autocomplete");
div.appendChild(input);
var label = document.createElement("label");
label.setAttribute("for", "autocomplete-input");
input.appendChild(label);
row.appendChild(col3);
tbody.appendChild(row);
console.log(tbody)
const old_tbody = document.getElementById("table-body")
});
}
</script>
For sure this is some stupid mistake (propably with event) but I am quite new to web apps and have no clue what am I doing wrong.
I would like dynamic element of table (materialize autocomplete dropdown) to works just like that test static element.
