我在Google Apps Script中写了以下代码，我的HTML代码使用了Materialize.css的自动完成功能。我的HTML代码使用了Materialize.css的自动完成功能，但是自动完成功能没有运行。我从谷歌的一个ID为menioned below的表单中获取自动完成的数据。
html头包含了很多Bootstrap CDN和Materialize CDN。起初我以为自动完成是由于CDN冲突造成的。但似乎不是这样的。
请帮助我。
</script>
document.addEventListener('DOMContentLoaded', function(){
google.script.run.withSuccessHandler(populateCodes).getCodes(); });
function populateCodes(words)
{
var autocomplete = document.getElementById("InputCode");
var instances = M.Autocomplete.init(autocomplete,{data : words});
}
function FilterTables() {
var input, filter, table, tr, td, i;
input = document.getElementById("InputCode");
filter = input.value;
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
if (td.innerHTML.indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
function getCodes()
{
var id = "1L33jDRFmDxEf3Q-RYR8uyQe6IVkSDkSU09YKusZ_8Gw";
var ss = SpreadsheetApp.openById(id);
var wsData = ss.getSheetByName("Data");
var RetCodes = wsData.getRange(2, 2,wsData.getRange('B2').getDataRegion().getLastRow(),1).getValues();
var options = {};
var CodesR = RetCodes.map(function(o){return o[0];})
RetCodes.forEach(function(v)
{
options[v[0]] = null;
});
return options;
}
</script>
<html>
<head>
<base target="_top">
<meta charset="utf-8">
<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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<?!= include("page-css"); ?>
</head>
<body>
<?!= include("page-js"); ?>
<div class="row">
<div class = "container">
<div class="input-field col s3">
<i class="material-icons prefix">textsms</i>
<input type="text" id="InputCode" style="width: auto alignment: center" >
<label id = "InputLabel" for="InputCode"></label>
<input id='RClick' type='button' name='button' value='Details' onclick="FilterTables()">
</div>
</div>
</div>
<div class = "container">
<div class="input-field col s8">
<table id="myTable">
<?!= tablecells ?>
</table>
</div>
</div>
</body>
</html>