Materialise CSS 的自动完成功能不起作用（Javascript + Google Apps 脚本）

Question

I have written the following code in Google Apps Script.我在 Google Apps 脚本中编写了以下代码。 My HTML code is using the Autocomplete from Materialize.css However, the autocomplete is not running.我的 HTML 代码正在使用 Materialize.css 的自动完成但是，自动完成没有运行。 I take the data for autocomplete from a google sheet with ID menioned below.我从下面提到的 ID 的谷歌表格中获取自动完成数据。

The html head contains a lot of Bootstrap CDN and Materialize CDN. html磁头包含很多Bootstrap CDN和Materialize CDN。 Initially I thought that the autocomplete is not working because of conflicting CDNs.最初我认为由于 CDN 冲突，自动完成功能无法正常工作。 But that doesn't seem to be the case.但情况似乎并非如此。

Please help me.请帮我。

  </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>

Answer 1

For starters - you are missing the classname .autocomplete .对于初学者-您缺少类.autocomplete 。 This is pretty crucial - it is the class that Materialize uses to turn a regular input into an autocomplete.这非常关键 - Materialise 使用 class 将常规输入转换为自动完成。

<input type="text" id="InputCode"  style="width: auto alignment: center" >

Always use the markup from the docs until you're comfortable freestyling.始终使用文档中的标记，直到您对自由样式感到满意为止。

Pen to demo the importance of the classname. Pen来演示类名的重要性。

Materialise CSS 的自动完成功能不起作用（Javascript + Google Apps 脚本）

问题描述

1 个解决方案

解决方案1
0 2020-04-30 14:47:31

Materialise CSS 的自动完成功能不起作用（Javascript + Google Apps 脚本）

问题描述

1 个解决方案

解决方案1 0 2020-04-30 14:47:31

解决方案1
0 2020-04-30 14:47:31